拖拽是一个非常实用的页面效果
1.拖拽的一些应用场景：
1.1. 浏览器标签顺序的切换
1.2. 页面上小组件的拖拽
1.3. 弹出层的拖拽
2 .基本原理
2.1 拖拽的基本原理是：
鼠标在元素上按下的时候，获取鼠标在页面上的位置，计算鼠标相对元素的定位：disX，disY；
鼠标移动的时候，元素跟着鼠标移动，但鼠标相对于元素是不动的，因此，可以根据disX，disY计算元素的位置；
鼠标松开的时候，元素停止移动；
最重要的一点是：需要拖动的那个元素position要设置成absolute或relative，这样才可以移动。
2.2 事件：上述前三个步骤对应三个事件
onmousedown：在用户按下了任意鼠标按钮时触发
onmousemove：当鼠标指针在元素内部移动时重复地触发
onmouseup：在用户释放鼠标按钮时触发
3. 举个例子
HTML代码：
<div id="box"></div>
CSS代码：
1 html, 2 body{ 3 ????width: 100%; 4 ????height: 100%; 5 } 6 #box{ 7 ????width: 100px; 8 ????height: 100px; 9 ????background-color: pink;10 ????position: absolute;11 }JS代码：
1 var box = document.getElementById(‘box‘); 2 box.onmousedown = function(){ 3 ????var event = event ? event : window.event; ?4 ?5 ????//获取鼠标相对元素的位置 6 ????var disX = event.clientX - box.offsetLeft; 7 ????var disY = event.clientY - box.offsetTop; 8 ?9 ????//当鼠标移动的时候，获取元素的位置10 ????document.onmousemove = function(){11 ????????var event = event ? event : window.event; 12 ????????var iL = event.clientX - disX;13 ????????var iT = event.clientY - disY;14 ????????box.style.left = iL +‘px‘;15 ????????box.style.top = iT +‘px‘;16 ????}17 18 ????//当鼠标松开的是，元素随着鼠标停止19 ????document.onmouseup = function(){20 ????????document.onmousemove = null;21 ????????document.onmouseup = null;22 ????}23 24 }增加磁性吸附效果，js代码改为：
1 var box = document.getElementById(‘box‘); 2 box.onmousedown = function(){ 3 ????var event = event ? event : window.event; ?4 ?5 ????//获取鼠标相对元素的位置 6 ????var disX = event.clientX - box.offsetLeft; 7 ????var disY = event.clientY - box.offsetTop; 8 ?9 ????//当鼠标移动的时候，获取元素的位置10 ????document.onmousemove = function(){11 ????????var event = event ? event : window.event; 12 ????????var iL = event.clientX - disX;13 ????????var iT = event.clientY - disY;14 15 ????????//磁性吸附16 ????????if(iL<=50){17 ????????????iL = 0;18 ????????}else if(iL>=document.documentElement.offsetWidth - box.offsetWidth - 50){19 ????????????iL = document.documentElement.offsetWidth- box.offsetWidth;20 ????????}21 ????????if(iT<=50){22 ????????????iT = 0;23 ????????}else if(iT>=document.documentElement.offsetHeight - box.offsetHeight - 50){24 ????????????iT = document.documentElement.offsetHeight- box.offsetHeight;25 ????????}26 ????????box.style.left = iL +‘px‘;27 ????????box.style.top = iT +‘px‘;28 ????}29 30 ????//当鼠标松开的是，元素随着鼠标停止31 ????document.onmouseup = function(){32 ????????document.onmousemove = null;33 ????????document.onmouseup = null;34 ????}35 }js实现鼠标的拖拽效果
原文地址：http://www.cnblogs.com/qm57bk/p/7751505.html