JS拖拽主要用到以下事件，我用一个例子来说明：
假设我们要实现一个可拖拽的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事件中必须调用，以防止浏览器默认行为，从而允许放置。
这个例子演示了拖拽的基本流程和相关事件的使用。实际应用中，你可能需要根据具体需求进行调整和扩展。例如，处理不同数据类型的拖拽，实现更复杂的拖拽效果，以及与服务器交互等。