jquery拖拽（最淺顯易懂的分析）

標籤：簡單   query   span   jquery   blog   css   如何   function   記錄   

如何?一個可以拖拽的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‘)            })        })

 

jquery拖拽（最淺顯易懂的分析）