javascript：鼠标拖动一个dom到另外一个

其他 2019-01-16 13:28:18 阅读次数: 0 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="target-densitydpi=medium-dpi, width=device-width, height=device-height, initial-scale=1" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}

body{border:1px solid #066}
.swap_h{ width:1000px; height:77px}
.swap_h div{width:108px; height:75px; word-wrap:break-word; word-break:break-all; float:left; border:1px solid #096;  overflow:scroll}
</style>
</head>
<body leftmargin="4" rightmargin="4" onswipe="g('dbg1').innerHTML='swipe b'" onswipeleft="g('dbg2').innerHTML='left b'" onswiperight="g('dbg2').innerHTML='right b'">
<div id="tmove" style="float:left; width:100%">
    <div style="width:100%; clear:both; float:left" id="list_container">
        <div style="width:70%; float:left; border:1px solid #800; height:120px" id="list_left"></div>
        <div style="width:28%; float:left; border:0; height:120px" id="list_right">
            <div id="box0" style="width:49%; float:left; border:1px solid #080; height:120px"></div>
            <div id="box1" style="width:49%; float:left; border:1px solid #008; height:120px"></div>
        </div>
    </div>
    <div id="swap_lists" style="width:300px; overflow:hidden; height:77px; margin:0 auto">
        <div style="word-break:break-all" class="swap_h" id="swap_1">
            <div id="swap_11"> -1<?php echo date('H:i:s'); ?></div>
            <div id="swap_12"> -2</div>
            <div id="swap_13"> -3</div>
            <div id="swap_14"> -4</div>
        </div>
    </div>
</div>
<div id="dbg">dbg</div>
<div id="dbg1">dbg</div>
<script language="javascript">
function l(s){
	g('dbg').innerHTML = s;
}
var minfo = '';
var divinfo = '';
var linfo = '';
function ll(){
	g('dbg1').innerHTML = '鼠标：'+minfo+"<br/>层："+divinfo+'<br>'+linfo;
}
function printEvent(evt)
{
	try
	{
		var tmp = '';
		for(var i in evt)
		{
			tmp += i+':'
			var v = evt[i]+'';
			if(v=='[object HTMLDivElement]')
			{
				tmp+=' <b>div</b> - '+evt[i].id+'<br/>';
			}
			else if(''+(evt[i])=='[object TouchList]')
			{
				tmp+=' <br/>    <b>touchlist</b>:<div style="border:1px solid red; margin:1px"> ';
				for(var x in evt[i])
				{
					if(''+(evt[i][x])=='[object Touch]')
					{
						tmp+='<br>    ----'+x+':'+' <b>Touch</b><br/><div style="border:1px solid blue;margin:1px">';
						for(var y in evt[i][x])
						{
							if(evt[i][x][y]=='[object HTMLDivElement]')
							{
								tmp+='    ----'+y+':<b>div</b> - '+evt[i][x][y].id+'<br/>';
							}else tmp+='<br>    ----'+y+':'+evt[i][x][y]+'<br/>';
						}
						tmp+='</div>';
					}else
						tmp+='<br>     '+x+':'+evt[i][x]+'<br/>';
				}
				tmp+='</div>';
			}else if(typeof(evt[i])=='number'){				
				tmp+='<font color="green">'+v+'</font><br/>';
			}			
			else tmp+=''+v+'<br/>';
		}
		return tmp;
	}catch(e){
		alert(e)
	}
}
function getxy(e){
	var a=new Array()
	var t=e.offsetTop;
	var l=e.offsetLeft;
	var w=e.offsetWidth;
	var h=e.offsetHeight;
	while(e=e.offsetParent){
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	a[0]=w;a[1]=h;
	a[2]=l;a[3]=t;
	return a;
}
//new touch(g('div1'),slowmv);
function touch(obj)
{
	try{
		this.leftRightOnly = false;
		if(!obj.id){
			var dt = new Date();
			var id = dt.getTime()+'_'+dt.getUTCMilliseconds();
			obj.id = id;
		}
			
		this.id = obj.id;
		this.cobj = obj;
		this.instead_obj = false;
		
		if(obj.style.position!='absolute')
			obj.style.position!='relative';
		
		this.isPc = navigator.userAgent.indexOf('Windows')!=-1||navigator.platform.indexOf('Mac')!=-1;
		this.startFlag = false;
		obj.data = this;
		
		if(this.isPc){
			this.bind(obj,'mousedown',function(e){this.data.touchstart(e);});
			this.bind(obj,'mouseup',function(e){this.data.touchend(e);});
			//this.bind(obj,'mouseout',function(e){this.data.touchend(e);});
			this.bind(obj,'mousemove',function(e){this.data.touchmove(e);});
		}else{
			this.bind(obj,'touchstart',function(e){this.data.touchstart(e);});
			this.bind(obj,'touchend',function(e){this.data.touchend(e);});
			this.bind(obj,'touchmove',function(e){this.data.touchmove(e);});
		}
	}catch(e){
		alert("touch: "+e);
	}
}
touch.prototype.bind = function(obj,evt,fun)
{
	if(typeof obj.attachEvent != 'undefined')
	{
		obj.attachEvent('on'+evt,fun);
	}else{
		obj.addEventListener(evt,fun,true);
	}
}
function copyADom(obj){
	var html = obj.innerHTML;
	var nobj = document.createElement(obj.tagName);
	nobj.innerHTML = html;
	nobj.className = obj.className;
	nobj.style.cssText = obj.style.cssText;
	nobj.id = obj.id+'_copy';

	return nobj;
}
touch.prototype.getOverDom=function(x, y){
	var objs = this.cobj.getElementsByTagName('div');
	var arr = [];
	var arr1 = ["this.target_obj_id="+this.target_obj_id];
	for(var i=0;i<objs.length;i++){
		var xy = getxy(objs[i]);
		var ex = xy[0]+xy[2];
		var ey = xy[1]+xy[3];
		var f = 0;
		if(
			(!objs[i].id || objs[i].id.indexOf(this.target_obj_id)==-1 )
			&& xy[2]<=x && xy[3]<=y && ex>=x && ey>=y){
			arr.push({'o':objs[i],'x':xy[2],'w':xy[0]});
			f = 1;
		}
		arr1.push((f?"OK-> ":"")+"id="+objs[i].id+", x="+xy[2]+", y="+xy[3]+"; xe="+ex+", ye="+ey);
	}
	linfo = arr1.join('<br>');
	var maxo = false;
	if(arr.length>0){
		var maxx = 0;
		var maxw = 0;
		for(var i=0;i<arr.length;i++){
			if(arr[i].x>=maxx){
				if(arr[i].x==maxx && maxw<arr[i].w) continue;
				maxx = arr[i].x;
				maxo = arr[i].o;
				maxw = arr[i].w;
			}
		}
	}
	return maxo;
}
touch.prototype.touchstart=function(evt)
{
	try{
		if(this.isPc)
			var tch = evt;
		else
			var tch = evt['touches'][0];
			
		if(this.isPc)
			var id = this.id;
		else
			var id  = tch.target.id

		this.target_obj = evt.srcElement || evt.target;
		
		if(!this.target_obj.id){
			var dt = new Date();
			var id = dt.getTime()+'_'+dt.getUTCMilliseconds();
			this.target_obj.id = id;
		}
		this.target_obj_id = this.target_obj.id;
		
		var xy = getxy(this.target_obj);
		console.log(xy);
		this.instead_obj = copyADom(this.target_obj);

		this.target_obj.parentNode.insertBefore(this.instead_obj, this.target_obj);
		this.target_obj.parentNode.removeChild(this.target_obj);
		this.target_obj_position= this.target_obj.style.position;
		this.target_obj_border  = this.target_obj.style.border;
		this.target_obj_width   = this.target_obj.style.width;
		this.target_obj_height  = this.target_obj.style.height;
		this.target_obj_opacity = this.target_obj.style.opacity;
		
		this.cobj.appendChild(this.target_obj);
		
		this.offset = [evt.x-xy[2], evt.y - xy[3]];		
		this.target_obj.style.position='absolute';	
		this.target_obj.style.border = '1px dashed #ccc';	
		
		this.target_obj.style.left = (evt.x-this.offset[0])+'px';
		this.target_obj.style.top  = (evt.y-this.offset[1])+'px';
		this.target_obj.style.zIndex  = 3;
		this.target_obj.style.opacity = 0.3;
		
		this.target_obj.style.width  = xy[0]+'px';
		this.target_obj.style.height = xy[1]+'px';
		this.oobj = false;
		console.log(evt);
			
		//this.tch_start[id] = [tch.clientX,tch.clientY,tch.clientX];
		//l("this.tch_start[id]="+this.tch_start[id]+",id="+id)
		this.startFlag = true;
		evt.preventDefault();
		divinfo = '触摸开始：'+this.target_obj.id+"，点击位置："+this.offset[0]+","+this.offset[1];
		ll();
	}catch(e){
		alert('this.tch_start='+e+'<br />'+e);
	}
}
touch.prototype.touchend=function (evt)
{
	try{
		if(!this.startFlag) return;
		if(!this.isPc && (typeof(evt.changedTouches)=='undefined'||evt.changedTouches.length<1)) return;

		if(this.isPc)
			var id  = this.id;
		else
			var id = evt.changedTouches[0].target.id;

		console.log(evt);
		console.log(this.target_move_evt);

		this.startFlag = false;
		this.cobj.removeChild(this.target_obj);
		this.target_obj.style.position=this.target_obj_position;	
		this.target_obj.style.border  = this.target_obj_border;	
		this.target_obj.style.width   = this.target_obj_width;
		this.target_obj.style.height  = this.target_obj_height;		
		this.target_obj.style.opacity = this.target_obj_opacity;

		this.instead_obj.parentNode.insertBefore(this.target_obj, this.instead_obj);
		this.instead_obj.parentNode.removeChild(this.instead_obj);
		
		if(this.oobj)
				this.oobj.style.border = this.oobj_border;
	}catch(e){
		alert('touchend error='+e)
	}
}
touch.prototype.touchmove=function(evt)
{
	try{
		if(!this.startFlag) return;
		if(this.isPc){
			var id = this.id;
			var tch = evt;
		}else{
			var tch = evt['touches'][0];
			var id  = tch.target.id; 
		}
		minfo = "x="+evt.x+", y="+ evt.y+ '; target='+ this.target_obj_id +
		evt.toElement.id+','+evt.target.id+','+evt.srcElement.id;
		
		wevt = evt;
		this.target_obj.style.left = (evt.x-this.offset[0])+'px';
		this.target_obj.style.top  = (tch.clientY-this.offset[1])+'px';

		this.target_move_evt = evt;
		
		
		var oobj = this.getOverDom(evt.x, evt.y);
		if(oobj){
			if(this.oobj)
				this.oobj.style.border = this.oobj_border;
			this.oobj = oobj;
			this.oobj_border = this.oobj.style.border;
			this.oobj.style.border = '1px solid #f0f';
			minfo+= ', over: '+oobj.id;
		}
		ll();
		evt.preventDefault();
	}catch(e){
		console.log('touchmove error='+e);
		//l(printEvent(evt));
	}
}
function g(id)
{
	return document.getElementById(id);
}
var t = new touch(g('tmove'));

</script>
</body>
</html>



猜你喜欢

转载自blog.csdn.net/leinchu/article/details/80454088
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022