以前写过一个拖动效果的Demo，拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的。计算效率差，而且效果不好。所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果。
其实顺滑的拖拽效果的突破口有两点：
- 事件捕捉要去捕捉document的鼠标位置。
- 使用setInterval功能计算拖拽元素的新位置。
使用jQuery，经过一些简单的重构和调试，将代码完善如下：
drag.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link type="text/css" rel="stylesheet" href="drag.css"> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="drag.js"></script> </head> <body> <div class="drag-panel"> <div class="title">Drag Panel</div> </div> </body> </html>
drag-panel.css ，做一些简单的修饰：
.drag-panel{ position: absolute; width:300px; height:100px; border:1px solid black; cursor:default } .drag-panel .title{ text-align:center; background-color:yellowgreen; }
drag.js ，效果非常好：
$(function(){ var m_x0,m_y0, // 鼠标坐标0 m_x1,m_y1, // 鼠标坐标1 timeHandler //定时器句柄 var $dragPanel = $(".drag-panel"); var $dragTitle = $(".drag-panel .title"); // 鼠标点击，触发拖拽过程。 $dragTitle.mousedown(function(e){ // 确定上一次调用的定时器是被清空了。 if(timeHandler!=0){ window.clearInterval(timeHandler); } // 确定鼠标的初始位置。初始状态下，鼠标位置1与鼠标位置0必须相同。 m_x0 = m_x1 = e.clientX; m_y0 = m_y1 = e.clientY; // 鼠标移到需要扑捉document的鼠标位置。 // mouseup表示鼠标拖拽动作结束。该动作清空拖拽动期间的计算，且mouseup也只执行一次。 $(document).mousemove(mousemoveFunc).one("mouseup",mouseupFunc); // 定时计算拖拽元素位置。 timeHandler = window.setInterval(dragPos,30); }); // 鼠标移动，获取鼠标的全局坐标。 function mousemoveFunc(e){ window.console.log(new Date().getTime()); m_x1 = e.clientX; m_y1 = e.clientY; } // 鼠标拖拽动作结束，清空的拖拽期间的计算。 function mouseupFunc(e){ if(timeHandler>0){ window.clearInterval(timeHandler); timeHandler = 0; $(document).unbind("mousemove",mousemoveFunc); } } // 拖拽计算。 function dragPos(){ var dm_x = m_x1 - m_x0; var dm_y = m_y1 - m_y0; var p0 = $dragPanel.offset(); $dragPanel.css("top",p0.top+dm_y+"px"); $dragPanel.css("left",p0.left+dm_x+"px"); m_x0 = m_x1; m_y0 = m_y1; } })
效果如下：
Drag Panel