DOM元素拖拽效果：
當鼠標選中目標元素之後可以將其拖放至指定區域的任意位置，實現的思路主要是通過鼠標事件按下、移動、抬起，摁下鼠標時記錄鼠標位置以及元素位置並算出鼠標相對元素的位置，在拖拽時記下當前鼠標的位置從而計算出鼠標移動距離，最後將元素的當前位置賦值給屬性el.style.left和el.style.top即可（如果是圖片的話加入：e.preventDefault()）。
設置left屬性
left 屬性規定了元素的左邊距緣，只有定義了position：relative或absolute屬性的元素才有left屬性，元素內聯樣式中設置了left才能通過el.style.left獲取或設置相對於具有定位屬性(position定義為relative)的父對象的左邊距，所以這裡我們需要為元素設定position屬性。在允許拖拽的區域設置屬性position：relative，被拖拽元素設置屬性position：absolute。
定義mousedown事件
當鼠標指針移動到元素上方並按下鼠標按鍵時觸發mousedown事件，mousedown事件僅需按鍵被按下即可發生（click事件按下並鬆開之後觸發），通過該事件中我們可以獲取鼠標按下時的元素及鼠標相對該元素的位置。
定義onmousemove事件
當鼠標指針移出指定的元素對象時觸發onmousemove事件，通過該事件來獲取鼠標移動後的位置及計算出相對於具有定位屬性(position定義為relative)的父對象的邊距。通過left屬性將計算到的邊距賦值給當前元素，這樣當前元素的位置就移動到了當前鼠標所在的位置了（如果當前元素是img的話會出現新窗口打開的現象，這裡我們添加一個preventDefault方法來阻止新窗口打開即可）。
定義onmouseup事件
當鼠標按鍵被鬆開時觸發onmouseup事件，通過該事件來清除onmousemove和onmouseup事件。因為onmousemove 和onmouseup是用document實現的，為避免出現事件衝突所以最好還是執行完之後清除的好。下面是完成的拖拽方法代碼：
自定義拖拽指令
還有一種方法就是將該方法綁定到一個自定義指令，這樣就可以通過調用指令的形式來實現拖拽效果，具體的實現方法可以參考文章Vue實戰066：自定義指令及使用，有如何定義拖拽指令的實例。
知識拓展：client、 page、screen、 layer、 offset屬性的區別
在實現拖拽效果的時候我們需要清楚這幾個屬性的區別（都是計算鼠標點擊的偏移值），我們只有瞭解了才能實現我們想要的拖拽效果。
功能拓展：放大、縮小、旋轉
實現元素的放大、縮小功能可以通過transform屬性中的scale參數值來實現，該值用來定義 2D 縮放轉換。而旋轉功能則可以通過transform屬性中的rotate(angle)參數值來實現，該值用來定義 2D 旋轉，在參數中規定角度即可。
總結：
以上內容是小編給大家分享的Vue實戰067：DOM元素拖拽效果的實現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。更多Vue實戰技巧可以參考專欄：Vue實戰系列，在此也非常感謝大家對小編的支持！
閱讀更多 編程手札 的文章
