jquery拖拽（最浅显易懂的分析）

Posted 2020-10-03 pixelK

如何实现一个可以拖拽的div？

其实很简单，我们捋清思路，很快便能实现。

首先div的拖拽，如果把div当作一件物品，我们拖拽的时候是因为手抓住了这件物品，因此我们走到哪里，东西就到了哪里。

但是鼠标是没有办法抓住div的，写代码不会那么直来直去，有时候像魔术，需要使用一些障眼法，使最终看起来达到了效果。

抛开过程不谈，只看结果，拖拽实现的最终效果是，鼠标到哪里，div就跟到哪里。

知道了这一点，那就继续分析，这不就是位移的问题嘛。你往前走1m，我就往前走1m，你往后退多少我也往后退多少，上下左右都一样。

这里边存在一个问题，那就是距离，二者的距离始终都是固定的。

还有一个问题，什么样的div才能 自由移动？必须是具有position定位的div，并且不是static

那么css可以这样写：

div {
       position: absolute;
       top: 0;
       left: 0;
       width: 100px;
       height: 100px;
       background-color: red;
     }

既然是拖拽div，那么鼠标必须放在div上拖拽才有用,js得这样：

$(‘div‘).mousedown(function(e) {
　　　　　　　//鼠标在div上按下的时候，记录div的位置
            var divPosition = $(this).offset();
　　　　　　　//鼠标与div在x轴的距离
            var distanceX = e.pageX - divPosition.left
　　　　　　　//鼠标与div在y轴的距离
            var distanceY = e.pageY - divPosition.top
　　　　　　　　//鼠标开始移动了
            $(document).mousemove(function(e) {
　　　　　　　　　　//鼠标的位置减去与div的固定距离，就是div需要移动的位置
                var x = e.pageX - distanceX
                var y = e.pageY - distanceY
　　　　　　　　　　//给div设置位移
                $(‘div‘).css({
                    left: x + ‘px‘,
                    top: y + ‘px‘
                })
            })
　　　　　　　　//鼠标抬起，取消mousemove事件，拖拽失效
            $(document).mouseup(function() {
                $(document).off(‘mousemove‘)
            })
        })