前端拖放知识

概述

本文主要介绍前端中拖拽相关的知识以及如何在 vue3 工程里实现拖拽指令。

前端中的拖拽

前端中的拖拽功能是一种交互设计，允许用户通过鼠标或触摸操作移动页面上的元素到不同的位置。这一功能的实现涉及 HTML、CSS 和 JavaScript 的综合运用。

HTML元素拖拽

• 拖拽元素

HTML 元素有一个draggable属性，接受一个布尔值，默认值为false（不可拖拽）。

<div draggable="true">我是可拖动的</div>

• 事件处理

拖拽功能的实现依赖于几个关键的拖放事件：

• dragstart: 当用户开始拖动元素时触发，可以在这里设置数据传输（如拖动的数据类型和值）。

• drag: 元素正在被拖动时连续触发。

• dragend: 用户释放鼠标，结束拖动时触发。

• dragenter 和 dragover: 当拖动的元素进入或停留在目标区域时触发。通常需要阻止这两个事件的默认行为，以允许元素被放置。

• drop: 在拖动元素被释放到有效目标时触发，是接收拖动数据并执行相应操作的地方。

示例效果

效果如下：

核心代码

代码如下：

dragClass.addEventListener("dragstart", (e) => {
   
  const node = e.target.cloneNode(true);
  e.dataTransfer.setData("cloneNode", node.outerHTML);
});

dragClass.addEventListener("dragend", (e) =>