Web的鼠标拖动效果

浏览数：66 / 时间：2015年06月09日

以前写过一个拖动效果的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;
    } 
    
})