本章作為自己動手寫插件的第一篇文章，會盡可能的詳細描述一些實現的方式和預備知識的講解，隨着知識點積累的一點點深入，可能到了后期講解也會有所跳躍。所以，希望知識點不是很扎實的讀者或者是初學者，不要跳讀。因為在這里即使是你已經掌握的知識，重新的閱讀也會使你的記憶更加的深刻。還有作者才疏學淺，如果有什么地方講解錯的話，希望各位能夠斧正。另外，博主近期發現有某些人未經本人的允許，私自引用本人的文章。更離譜的是還沒有標注署名和來源，在此，特此聲明，本系列教程為博主與【博客園】共同所有，如需引用請注明出處
這個系列的文章至少需要掌握HTML5的一些新的特性和CSS3的新特性，同時還需要各位能夠掌握基礎的JS操作和jquery操作。
在以上都知識點都掌握的基礎上，推薦還不是很清楚jquery插件是怎么回事的同學可以看一下我之前的一篇文章： jQuery插件編寫精講與技巧
說到這一個思路分析：大致上實現的思路有以下兩種。
一、判斷塊是否被按下(mousedown)，然后在點擊事件中嵌套移動事件(mousemove)，同時在里面放置一個松開的事件(mouseup)
二、跟第一種方法類似，都是分成三個事件來觸發，但是不同的是：事件與事件之間沒有互相嵌套，而是分成三個獨立的事件，通過一個控制器（變量）來達到事件之間的交互
第一種方法是不推薦的，因為這種方法雖然直觀，符合整個思考的邏輯，但是這個方法的做法相對比較復雜，而且如果有什么要改動的話也不方便。這個我們可以理解為耦合性較高。第二種方法事件邏輯簡單，而且所有的事件都是分開來執行的，沒有依賴關系，后期維護性較好。
以第二種方法為例我們來分析：
這里我就來講解最為核心的計算公式的推導：
圖例如下所示：
以左上角的坐標為例，假設左上角的坐標為(X0,Y0),同時我們可以計算第一次點擊的位置到最終釋放的位置的坐標,相對的移動距離（以X軸為例，Y軸同理）:(MousedownX1-MousedownX0),所以最終的結果相對於初始化的移動距離是：(MousedownX1-MousedownX0)+X0
其他的也沒有什么好講的，並且這個插件的思路也十分的容易實現，我相信讀者都可以按照上面的分析自己實現
這里就提供我自己制作的一款拖拽插件，這款拖拽插件用法簡單，而且提供了一些配置，可以在多種場景下面很方便的使用
github地址(如果覺得不錯的話，請點個贊)
1、首先我們在使用的時候要引入jDrag.js文件並且確保jquery.js已經在之前被引用
2、具體使用的方法參照現在附件中的DEMO1和DEMO2
3、這款插件除了實現對點擊的對象的移動功能，增加了一個功能，可以點擊某個對象，但是控制其父節點移動，這個在實際業務中主要是用在如；觸發彈出窗口標題，然后可以把整個 窗口拖動的效果
2016年12月6日
1、修復了當頁面出現滾動條而導致的拖動異常的bug
本節作為自己動手寫插件系列文章的第一篇，這篇文章旨在給大家一個入門的例子來體會到學習插件制作的樂趣。同時本系列會不連續的更新。預計明年年底完成本系列的所有文章。