以前写过一个拖动效果的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
时间： 2024-07-31 14:34:42