JavaScript中的拖拽（以及Html5中的拖放）
JavaScript中的拖拽（以及Html5中的拖放）
原理：
html：
<div id="div1"></div>
css：
#div1{ height:120px; width:120px; background:green; position:absolute; }
javascript：
window.onload=function (){ var obj=document.getElementById("div1"); obj.onmousedown=function (ev){ //获取鼠标相对 div的距离 var e= ev || event; var relativeX=e.clientX-obj.offsetLeft; var relativeY=e.clientY-obj.offsetTop; //相对距离； //div太小，将事件加载document上； document.onmousemove=function (ev){ //重新计算div的位置滴呀 var e=ev || event; //这里我们还要限制物体运动的边界； var l=e.clientX-relativeX; //物体的位置，是以鼠标的位置来计算出来的 var t=e.clientY-relativeY; l<0?l=0:null; //左边界 l>document.documentElement.clientWidth-obj.offsetWidth?l=document.documentElement.clientWidth-obj.offsetWidth:null; //右边界 t>document.documentElement.clientHeight-obj.offsetHeight?t=document.documentElement.clientHeight-obj.offsetHeight:null;//下边界 t<0?t=0:null; //上边界 obj.style.left=l+'px'; obj.style.top=t+'px'; } //当鼠标松开时候，清空 document.onmouseup=function (){ document.onmousemove=null; document.onmouseup=null; } return false; //解决火狐中bug } }
上面的代码是在可视的区域中运动的滴呀；
如果body的高度和宽度超出我们浏览大小，显出出了滚动条；
那么就要改进坐标的获取方式了；
如下：
//得到鼠标的坐标滴哎呀 function getPosition(e){ var clientx=e.clientX; var clienty=e.clientY; var scrollLeft=document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop=document.body.scrollTop || document.documentElement.scrollTop; var x=clientx+scrollLeft; var y=clienty+scrollTop; return {x:x,y:y}; }
接下来，我们再来总结：
无法拖出可视区（上面的就是）
无法拖出整个页面（上面的就是）
无法拖出某个父级元素
原理：
html:
<div id="parent"> <div id="son"> </div> </div>
css:
#parent{ height:400px; width:400px; background:green; position:relative; opacity:0.5; filter:alpha(opacity:50); margin:0 auto; } #son{ height:80px; width:80px; background:red; opacity:0.5; filter:alpha(opacity:50); position:absolute; }
javascript:
//然后son在parent中移动，但不能超出边框； window.onload=function (){ var son=document.getElementById("son"); var parent=document.getElementById("parent"); son.onmousedown=function (ev){ var e=ev || event; //鼠标坐标，是相对整个页面的滴啊 //这里的offsetLeft 和 offsetTop 相对于parent的值滴呀 var relativeX=e.clientX-son.offsetLeft; var relativeY=e.clientY-son.offsetTop; //将事件绑定在我们的document上 document.onmousemove=function (ev){ var e=ev || event; //物体在浏览其中移动不用管，关键是限制他的边界; var x=e.clientX-relativeX; var y=e.clientY-relativeY; if(x<0){ x=0; }else if(x>(parent.offsetWidth-son.offsetWidth)){ //offsetWidth是他的盒子模型宽度 x=parent.offsetWidth-son.offsetWidth; } if(y<0){ y=0; }else if(y>(parent.offsetHeight-son.offsetHeight)){ y=parent.offsetHeight-son.offsetHeight; } son.style.left=x+'px'; son.style.top=y+'px'; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } }
还有一个磁性吸附；
其实，所谓的磁性吸附，就就是当div快要到达边界的时候，马上让它到达边界，如；
if(x<10){
x=0;
}//就是这种效果滴呀
上面的代码就能达到所谓的“磁性吸附的效果滴呀”。
上面的拖拽都是托的空的div，那么如果，div中有文字，或者div周围有文字呢？
就会出现文本被选中的情况！
解决方法：在son.onmousedown=function (){
return false; //最后一步阻止默认的行为；
//能够解决chrom ff 中的bug；
//但是，没法解决ie9一下版本的兼容性问题
}
但是ie有个独特的事件捕获的概念；
我们就可以利用者一点来解决这个bug
document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; if(son.setCapture!=undefined){ son.releaseCaputre(); } } if(son.setCapture!=undefined){ son.setCaputre(); } return false; } }
终结版：带框的拖拽
好吧，最后带来我们的额终结版的拖拽！（完整代码如下）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #parent{ height:400px; width:400px; background:green; position:relative; opacity:0.5; filter:alpha(opacity:50); margin:0 auto; } #son{ height:80px; width:80px; background:red; opacity:0.5; filter:alpha(opacity:50); position:absolute; } .box{ position:absolute; border:1px dashed black; } </style> </head> <body> <div id="parent"> <div id="son"> 测试 测试 测试 测试 测试 </div> </div> </body> <script type="text/javascript"> //然后son在parent中移动，但不能超出边框； window.onload=function (){ var son=document.getElementById("son"); var parent=document.getElementById("parent"); son.onmousedown=function (ev){ var e=ev || event; //鼠标坐标，是相对整个页面的滴啊 //这里的offsetLeft 和 offsetTop 相对于parent的值滴呀 var relativeX=e.clientX-son.offsetLeft; var relativeY=e.clientY-son.offsetTop; //将事件绑定在我们的document上 //这里我们再创建一个div var ele_div=document.createElement('div'); ele_div.className='box';//初始样式 //初始高度宽度 --还要减去我们border ele_div.style.height=son.offsetHeight-2+'px'; ele_div.style.width=son.offsetWidth-2+'px'; //初始位置； ele_div.style.top=son.style.top; ele_div.style.left=son.style.left; //document.body.appendChild(ele_div); parent.appendChild(ele_div); document.onmousemove=function (ev){ var e=ev || event; //物体在浏览其中移动不用管，关键是限制他的边界; var x=e.clientX-relativeX; var y=e.clientY-relativeY; if(x<10){ x=0; }else if(x>(parent.offsetWidth-son.offsetWidth)){ //offsetWidth是他的盒子模型宽度 x=parent.offsetWidth-son.offsetWidth; } if(y<10){ y=0; }else if(y>(parent.offsetHeight-son.offsetHeight)){ y=parent.offsetHeight-son.offsetHeight; } //移动的仅仅是我们的虚框； ele_div.style.left=x+'px'; ele_div.style.top=y+'px'; } document.onmouseup=function(){ son.style.left=ele_div.style.left; son.style.top=ele_div.style.top; //并且移除该该元素 //document.body.removeChild(ele_div); parent.removeChild(ele_div); document.onmousemove=null; document.onmouseup=null; if(son.setCapture!=undefined){ son.releaseCaputre(); } } if(son.setCapture!=undefined){ son.setCaputre();//这样就算是解决了这个bug滴呀 } return false; } } </script> </html>
效果：
接下来是HTML5中的拖放到指定的位置滴呀；区分拖放的拖拽滴呀；
