举例说明js拖拽用到的事件有哪些？

JS拖拽主要用到以下事件，我用一个例子来说明：

假设我们要实现一个可拖拽的div元素：

<div id="draggable" draggable="true">可拖拽的div</div>

const draggable = document.getElementById('draggable');

// 1. dragstart: 拖拽开始
draggable.addEventListener('dragstart', (event) => {
  // 设置拖拽数据，可以是文本或其他数据类型
  event.dataTransfer.setData('text/plain', '这是被拖拽的文本');
  // 设置拖拽时的视觉效果，例如半透明
  event.dataTransfer.effectAllowed = 'move';
  event.target.style.opacity = '0.5';
});

// 2. drag: 拖拽过程中持续触发
draggable.addEventListener('drag', (event) => {
  // 可以在这里更新拖拽元素的位置等信息 (不常用)
});

// 3. dragend: 拖拽结束
draggable.addEventListener('dragend', (event) => {
  // 恢复拖拽元素的样式
  event.target.style.opacity = '1';
});


// ---  目标元素上的事件 ---
const dropzone = document.getElementById('dropzone'); // 假设有一个id为dropzone的目标元素

// 4. dragenter: 拖拽元素进入目标元素区域
dropzone.addEventListener('dragenter', (event) => {
  // 可以在这里改变目标元素的样式，例如高亮显示
  event.preventDefault(); // 必须调用preventDefault()，否则无法触发drop事件
  event.target.style.backgroundColor = 'lightblue';
});

// 5. dragover: 拖拽元素在目标元素区域内移动时持续触发
dropzone.addEventListener('dragover', (event) => {
  // 必须调用preventDefault()，否则无法触发drop事件
  event.preventDefault();
});

// 6. dragleave: 拖拽元素离开目标元素区域
dropzone.addEventListener('dragleave', (event) => {
  // 恢复目标元素的样式
  event.target.style.backgroundColor = 'white';
});

// 7. drop: 拖拽元素在目标元素区域内释放鼠标
dropzone.addEventListener('drop', (event) => {
  // 阻止浏览器默认行为（例如打开链接）
  event.preventDefault();
  // 获取拖拽数据
  const data = event.dataTransfer.getData('text/plain');
  // 将拖拽元素添加到目标元素中，或者执行其他操作
  event.target.textContent = '拖拽内容：' + data;
  event.target.style.backgroundColor = 'white';
});

事件解释:

• dragstart: 在元素开始被拖动时触发。最重要的事件，用于设置拖动数据和效果。

• drag: 在元素被拖动时反复触发。

• dragend: 在拖动操作结束时触发（无论是否放置在有效的放置目标上）。

• dragenter: 当被拖动的元素进入放置目标时触发。

• dragover: 当被拖动的元素在放置目标上移动时反复触发。

• dragleave: 当被拖动的元素离开放置目标时触发。

• drop: 当被拖动的元素放置在放置目标上时触发。

关键点：

• draggable="true": 使元素可拖动。
• event.dataTransfer.setData(): 设置拖动数据。
• event.dataTransfer.getData(): 获取拖动数据。
• event.preventDefault(): 在dragenter、dragover和drop事件中必须调用，以防止浏览器默认行为，从而允许放置。

这个例子演示了拖拽的基本流程和相关事件的使用。实际应用中，你可能需要根据具体需求进行调整和扩展。例如，处理不同数据类型的拖拽，实现更复杂的拖拽效果，以及与服务器交互等。