jquery移动端拖动div

Jquery是目前最常用的JavaScript库之一，可以方便地实现很多前端交互效果。在移动端中，我们经常会遇到需要拖动div的情况，下面就来介绍如何使用jQuery实现移动端拖动div。

$(document).ready(function(){
    var myDiv = $("#myDiv");

    var isMouseDown = false;
    var currentX,currentY,startX,startY;

    myDiv.mousedown(function(e){
        e.preventDefault();
        isMouseDown = true;
        startX = e.pageX - myDiv.offset().left;
        startY = e.pageY - myDiv.offset().top;
    });

    $(document).mouseup(function(){
        isMouseDown = false;
    });

    $(document).mousemove(function(e){
        if(isMouseDown){
            currentX = e.pageX - myDiv.parent().offset().left - startX;
            currentY = e.pageY - myDiv.parent().offset().top - startY;
            myDiv.css({
                left: currentX + "px",top: currentY + "px"
            });
        }
    });
});

上面的代码就是实现移动端拖动div的代码，通过给div添加mousedown、mousemove和mouseup事件来实现。当鼠标按下时，获取鼠标点击位置与div左上角的距离，当鼠标移动时，计算div应当移动的位置，最后通过css方法实现div的移动。

需要注意的是，由于移动端的屏幕大小不一定相同，因此应当使用相对位置来移动div，即使用parent()方法获取div的父元素，再减去父元素的offset值，这样才能在不同屏幕上保证div的正确移动。