基於jquery 移動外掛程式的實現

引用謝燦勇位址

乙個思路分析：大致上實現的思路有以下兩種。

一、判斷塊是否被按下(mousedown)，然後在點選事件中巢狀移動事件(mousemove)，同時在裡面放置乙個鬆開的事件(mouseup)

二、跟第一種方法類似，都是分成三個事件來觸發，但是不同的是：事件與事件之間沒有互相巢狀，而是分成三個獨立的事件，通過乙個控制器（變數）來達到事件之間的互動

第一種方法是不推薦的，因為這種方法雖然直觀，符合整個思考的邏輯，但是這個方法的做法相對比較複雜，而且如果有什麼要改動的話也不方便。這個我們可以理解為耦合性較高。第二種方法事件邏輯簡單，而且所有的事件都是分開來執行的，沒有依賴關係，後期維護性較好。

以第二種方法為例我們來分析：

這裡我就來講解最為核心的計算公式的推導：

圖例如下所示：

以左上角的座標為例，假設左上角的座標為(x0,y0),同時我們可以計算第一次點選的位置到最終釋放的位置的座標,相對的移動距離（以x軸為例，y軸同理）:(mousedownx1-mousedownx0),所以最終的結果相對於初始化的移動距離是：(mousedownx1-mousedownx0)+x0

其他的也沒有什麼好講的，並且這個外掛程式的思路也十分的容易實現，我相信讀者都可以按照上面的分析自己實現

這裡就提供我自己製作的一款拖拽外掛程式，這款拖拽外掛程式用法簡單，而且提供了一些配置，可以在多種場景下面很方便的使用

github位址(如果覺得不錯的話，請點個贊)

四、外掛程式用法說明

1、首先我們在使用的時候要引入jdrag.js檔案並且確保jquery.js已經在之前被引用

2、具體使用的方法參照現在附件中的demo1和demo2

3、這款外掛程式除了實現對點選的物件的移動功能，增加了乙個功能，可以點選某個物件，但是控制其父節點移動，這個在實際業務中主要是用在如；觸發彈出視窗標題，然後可以把整個視窗拖動的效果

這款外掛程式主要是為了解決日常開發上面的拖拽問題，外掛程式的配置較為簡單，也可以作為新手的外掛程式入門案例

配置說明：

drag:true, //用來指定作用的塊是否可以移動

moveobject:this  //預設移動的物件和點選的物件相同，但是如果是特殊情況則需要觸發的物件和移動的物件不相同

上面引數的值為預設值，在使用的時候可以直接呼叫預設值，不需要傳遞引數

用法：1. 引入jdrag.js，注意在引入的時候確保jquery.js已經載入進來

2. 初始化移動物件，例如：

$("#test").jdrag();

上面的，我們也可以省略不寫，但是傳入其中必須為json資料

demo1

jdrag使用案例title>

head>

運動button>

停止button>

div>

body>