@dragstart 与 @mousedown拖拽事件

想要实现拖拽效果，可以用@dragstart和 @mousedown两个方法，但是真要使用时，用哪一个呢？具体请看以下两者的区别。

@dragstart使用场景：

有明确的拖拽区域与界限
拖拽灵活度要求不高
拖拽时有明确的数据传递需求

drag推拽事件配置：

发生在拖动元素上的事件

@dragstart：拖拽开始事件，可绑定于被拖拽元素上；
@dragend：拖拽结束事件，可绑定于被拖拽元素上；

@drag：拖拽过程中一直触发；

事件名	触发时机	触发次数
dragstart	当拖动开始时触发一次	1
drag	拖动开始后反复触发	n
dragend	拖动结束后触发一次	1

发生在目标元素上的事件

@dragover：拖拽持续移动事件，建议绑定于可拖放区域（下方灰色块）；

@dragenter：进入拖放区域，建议绑定于可拖放区域（下方灰色块），该事件仅在进入拖放区域时触发，在其内部移动时不触发，离开某一可拖放区域后再进入时会再次触发；

事件名	触发时机	触发次数
dragenter	当拖动元素进入目标时触发一次	1
dragover	当拖动元素在目标元素范围内时反复触发	n
drop	拖动元素在目标元素内释放时(在设置了dropover事件的前提下)	1

@mousedown使用场景：

要有顺畅的拖拽体验
没有固定的拖拽区域
不需要传递数据

mousedown推拽事件配置：@mousedown,@mousemove,@mouseup

判断到底使用@dragstart还是使用@mousedown其实很简单，使用@dragstart需要明确是否有被拖拽到的目标范围，比如从一个方块拖到另一个方块范围去。

举个例子：假如我有一个推拽对象需要在整个页面拖动，选择@dragstart还是@mousedown？

答案：@mousedown。全局拖动并不是两个方块之间拖动的关系，用@dragstart无法定位推拽对象是否已经触达被拖动到的目标范围，毕竟全局拖动的话从拖动开始，拖拽对象就已经在里面了。

接下来你是否好区分何时使用@mousedown何时使用@dragstart了呢？

@dragstart 与 @mousedown拖拽事件相关推荐

弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端移动端在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
jQuery画布以及拖拽事件
jQuery 画布 canvas 属于html元素 H5新元素需要结合js 在页面上放置一个canvas元素,就相当于放置了一块画布可以绘制路径矩形圆形字符图像主要属性: width 默 ...
vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
画布canvas+奥运五环+拖放(拖拽)事件
1.画布:canvas 1.介绍 canvas属于html新元素,需要结合js使用,可以用来绘制图形,也可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面. 在html页面上放置一个c ...
【JavaScript 进阶之旅 DOM篇第九章】鼠标行为、pageX|Y封装、拖拽事件封装
文章目录一.鼠标行为 1.clientX/Y 2.pageX/Y 3.screenX/Y 4.offsetX/Y 5.layerX/Y(不推荐使用) 6.x/y(不推荐使用) 二.pageX|Y封装 ...
中如何使用echart_jQueryEasyUI中的拖拽事件如何使用
jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽.可设置拖动元素相对于x.y轴拖动,可设置拖拽何时停止等效果 jQuery中的easyui是一个非常好用的插件,它虽然使用简单方便,但是 ...
UGUI事件之Drag拖拽事件
UI事件之Drag拖拽事件 ======================================================== 2.UGUI 事件命名空间当我们需要使用 UGUI 中的 ...
JavaFX鼠标拖拽事件
一.节点原拖拽事件 //鼠标拖拽进入node node.setOnMouseDragEntered(event->{//do something });//鼠标拖拽退出node node.set ...

@dragstart 与 @mousedown拖拽事件

@dragstart 与 @mousedown拖拽事件相关推荐

最新文章

热门文章