<!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>
javascript:鼠标拖动一个dom到另外一个
最新推荐文章于 2022-10-11 17:28:58 发布