JS拖拽事件_dragmove.js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32550037/article/details/78043476

本文介绍了JavaScript中的拖拽事件，包括dataTransfer对象、draggable属性、ondragstart、ondragmove、ondragenter、ondragover、ondrop、ondragend事件。重点讲述了Event.preventDefault()方法用于阻止默认行为，以及Event.effectAllowed属性设置拖拽效果的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽事件分为：

- dataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：<div title="拖拽我" draggable="true">列表1</div>
- ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- ondragmove事件：当拖拽元素在拖拽中触发的事件，此事件作用在被拖曳元素上
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
- ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
- ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
- Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
- Event.effectAllowed 属性：就是拖拽的效果。

dragstart示例代码

   dragstart (event) { 
 
     /* if (!this.zoomStatus) { 
 
       event.preventDefault() // 会阻止drag的后续事件，相当不再执行拖拽 
 
     } */ 
 
     event.dataTransfer.setDragImage(this.$refs.empty_drag, 0, 0) 
 
   // 记录初始量 
 
     this.dragX = event.pageX 
 
     this.dragY = event.pageY 
 
   },

dragmove事件示例

   dragmove (event) { 
 
   // 计算偏移量 
 
     this.left += event.pageX - this.dragX 
 
     this.top += event.pageY - this.dragY 
 
     this.dragX = event.pageX 
 
     this.dragY = event.pageY 
 
   },

注意：监控drag事件时，注意ondragstart、ondragmove、ondragend三个事件的区别以及event的不同，因为这三个事件都会被监控到，可以用event.type来判断