介紹
我覺得JS拖拽的功能，大家一定都不會陌生。然而，在自己實際的項目開發工程中，卻很少用到，以至於當自己開始着手實現這個這個功能當時候，也遇到了一些問題。
實現原理其實很簡單，無非是鼠標事件+定位，但是，在實現當過程中，還是有一些注意點。同時，我自己在開發過程中，也是看了一些相關當博文，其中，還牽扯到了其他一些知識點，也有一些自己當見解同大家分享。
PS：第一次用markdown編輯器，排版問題，歡迎吐槽。另外，本文所有的代碼都是基於vue框架。
用原始的mouse事件實現拖拽功能
首先附上代碼
html：
css：
js：
實現原理介紹：
這裏主要用到的onmousedown+onmousemove+onmouseup三個事件。
1、步驟一：首先，onmousedown事件中，先記錄被拖拽元素的原始位置（left和top），以及鼠標所點擊的位置（x和y），同時通過isDragFlag設置拖拽事件開始。
注意點：鼠標的位置不等於被拖拽元素的元素的位置，所以，兩者一定要區分開；
2、步驟二：若確定開始拖拽，則計算鼠標移動過程中的偏移量（disX和disY），並將該偏移量附加到被拖拽的元素上，使被拖拽元素移動到被拖拽的位置。
_注意點：1）一定要用偏移量，而不是絕對位置；2）鼠標位置的計算使用clientX和clientY（這裏就要牽扯出鼠標事件中各屬性的意義，見下圖。）；3）一定要用preventDefault()阻止鼠標的默認事件。
我絕得這張圖片以及描述的很清晰了，詳細可以參見原文（https://blog.csdn.net/weixin_41342585/article/details/80659736）
3、步驟三：當拖拽到指定的位置時，出發mousedown事件，設置isDragFlag爲false，結束拖拽事件。
至此，用JS實現元素拖拽的功能就實現了。
然而，你會發現，當被拖拽的元素中存在很多文字的時候，鼠標的點擊加移動就變成了選取文字，這也使很尷尬的一個問題。該如何解決呢？網上隨便搜一下，還是能找到很多的，在張鑫旭老師的demo中看的了onselectstart事件，加上之後，果然實現了。
詳見（https://www.zhangxinxu.com/wordpress/2010/03/javascript實現最簡單的拖拽效果/）
或者使用css解決：user-select: none;
此外，爲了讓拖拽變得更加好看，我們還可以設置cursor：move。
然而，H5中其實封裝了一套拖拽的api，用起來很香，下面繼續介紹；
H5實現元素拖拽
這裏簡單介紹一下用H5中的拖拽API實現拖拽功能，
直接上代碼：
其實，這裏的dragstart就相當於原來的mousedown，dragover相當於原來的dragover。然而，你會發現，少了一個類似於mouseup的事件。這時候，那麼之前的isDragFlag怎麼辦，沒錯，到這裏，這個變量就沒有用了，更改後的代碼如下：
是不是一下子簡潔了許多。
同時，完美還看到div中另一個屬性draggable，該屬性設置了標籤是否可以拖拽，對於一般的元素，要通過這個方式實現拖拽，這個屬性是必須的。但是對於img和沒有href的a標籤，這是默認可以拖拽的，不需要額外設置draggable=true。
當然，新增的api還不止這幾個，詳細的介紹可以再參考張鑫旭老師的博客（https://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-拖拽與拖放簡介/）