介绍
我觉得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-拖拽与拖放简介/）