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

时间:2024-03-13 13:13:09

介绍

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

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

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

H5实现元素拖拽

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