JS如何实现拖拽以及如何应用HTML5中新增的api实现拖拽

迈不过友情╰ 2022-02-19 14:57 500阅读 0赞

## 介绍 ##

我觉得JS拖拽的功能，大家一定都不会陌生。然而，在自己实际的项目开发工程中，却很少用到，以至于当自己开始着手实现这个这个功能当时候，也遇到了一些问题。  
实现原理其实很简单，无非是鼠标事件+定位，但是，在实现当过程中，还是有一些注意点。同时，我自己在开发过程中，也是看了一些相关当博文，其中，还牵扯到了其他一些知识点，也有一些自己当见解同大家分享。  
*PS：第一次用markdown编辑器，排版问题，欢迎吐槽。另外，本文所有的代码都是基于vue框架。*

## 用原始的mouse事件实现拖拽功能 ##

首先附上代码  
html：  
![拖拽元素的html代码][html]  
css：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70]  
js：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 1]  
实现原理介绍：  
这里主要用到的onmousedown+onmousemove+onmouseup三个事件。  
1、步骤一：首先，onmousedown事件中，先记录被拖拽元素的原始位置（left和top），以及鼠标所点击的位置（x和y），同时通过isDragFlag设置拖拽事件开始。  
*注意点：鼠标的位置不等于被拖拽元素的元素的位置，所以，两者一定要区分开；*  
2、步骤二：若确定开始拖拽，则计算鼠标移动过程中的偏移量（disX和disY），并将该偏移量附加到被拖拽的元素上，使被拖拽元素移动到被拖拽的位置。  
\_注意点：1）一定要用偏移量，而不是绝对位置；2）鼠标位置的计算使用clientX和clientY（这里就要牵扯出鼠标事件中各属性的意义，见下图。）；3）一定要用preventDefault()阻止鼠标的默认事件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 2]  
我绝得这张图片以及描述的很清晰了，详细可以参见原文（[https://blog.csdn.net/weixin\_41342585/article/details/80659736）][https_blog.csdn.net_weixin_41342585_article_details_80659736]  
3、步骤三：当拖拽到指定的位置时，出发mousedown事件，设置isDragFlag为false，结束拖拽事件。  
至此，用JS实现元素拖拽的功能就实现了。  
然而，你会发现，当被拖拽的元素中存在很多文字的时候，鼠标的点击加移动就变成了选取文字，这也使很尴尬的一个问题。该如何解决呢？网上随便搜一下，还是能找到很多的，在张鑫旭老师的demo中看的了onselectstart事件，加上之后，果然实现了。  
详见（[https://www.zhangxinxu.com/wordpress/2010/03/javascript实现最简单的拖拽效果/）][https_www.zhangxinxu.com_wordpress_2010_03_javascript]![在这里插入图片描述][20190416195610915.png]  
或者使用css解决：user-select: none;  
此外，为了让拖拽变得更加好看，我们还可以设置cursor：move。  
然而，H5中其实封装了一套拖拽的api，用起来很香，下面继续介绍；

## H5实现元素拖拽 ##

这里简单介绍一下用H5中的拖拽API实现拖拽功能，  
直接上代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 3]  
其实，这里的dragstart就相当于原来的mousedown，dragover相当于原来的dragover。然而，你会发现，少了一个类似于mouseup的事件。这时候，那么之前的isDragFlag怎么办，没错，到这里，这个变量就没有用了，更改后的代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 4]  
是不是一下子简洁了许多。  
同时，完美还看到div中另一个属性draggable，该属性设置了标签是否可以拖拽，对于一般的元素，要通过这个方式实现拖拽，这个属性是必须的。但是对于img和没有href的a标签，这是默认可以拖拽的，不需要额外设置draggable=true。  
当然，新增的api还不止这几个，详细的介绍可以再参考张鑫旭老师的博客（[https://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-拖拽与拖放简介/）][https_www.zhangxinxu.com_wordpress_2011_02_html5-drag-drop-]

[html]: /images/20220219/1a21b09cb60b4719afb0bf9694fc4115.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70]: /images/20220219/4fb01413b72e44df8b70724d08812a00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 1]: /images/20220219/ddda1e81fed24126ba7cc065ed519cab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 2]: /images/20220219/b097944d2fd74607a16ed45adb80c3d6.png
[https_blog.csdn.net_weixin_41342585_article_details_80659736]: https://blog.csdn.net/weixin_41342585/article/details/80659736%EF%BC%89
[https_www.zhangxinxu.com_wordpress_2010_03_javascript]: https://www.zhangxinxu.com/wordpress/2010/03/javascript%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/%EF%BC%89
[20190416195610915.png]: /images/20220219/0566dab86bda4a16bf31a6f2aab4eb5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 3]: /images/20220219/14f07c7c2b3a4e87aa6558d39365a9b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_10_color_FFFFFF_t_70 4]: /images/20220219/772ac215328d4ccab13549290db1f50d.png
[https_www.zhangxinxu.com_wordpress_2011_02_html5-drag-drop-]: https://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/%EF%BC%89