原生拖拽交互通过dragstart和drop等事件实现跨区域元素移动，需设置draggable属性、用dataTransfer传递数据、在dragover中preventDefault允许放置，并在drop中解析数据操作DOM。
原生拖拽交互不依赖第三方库，用 dragstart 和 drop 搭配其他拖放事件就能实现跨区域、跨容器的元素移动。关键在于正确设置可拖拽属性、传递数据、阻止默认行为，并在目标处解析和应用数据。
让元素可拖拽：设置 draggable 属性与 dragstart 事件
只有设置了 draggable="true" 的元素才能被拖动。注意：图片、链接默认可拖拽，但普通 div 等需显式开启。
在 dragstart 中，必须通过 dataTransfer.setData() 存储要传递的信息（如元素 ID、类型或序列化数据），否则 drop 时无法读取：
<div id="item-1" draggable="true">待拖拽项</div>
item1.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'item-1'); // 必须设置，否则 drop 无法获取
e.dataTransfer.effectAllowed = 'move'; // 可选：提示允许的操作（move/copy/link）
});
允许放置：关键在 dragover 里阻止默认行为
drop 事件本身不会触发，除非其父级（通常是目标容器）在 dragover 阶段调用 e.preventDefault() —— 这是原生拖放最易忽略的一步。
同时建议在 dragenter 中添加视觉反馈（如高亮边框），提升用户体验：
<div id="drop-zone">投放区</div>
const dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // ⚠️ 必须！否则 drop 不会触发
});
dropZone.addEventListener('dragenter', (e) => {
e.preventDefault();
dropZone.classList.add('hover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('hover');
});
执行投放：在 drop 中读取数据并操作 DOM
drop 触发后，用 dataTransfer.getData() 取出 dragstart 存入的数据，再根据业务逻辑做处理 —— 如移动节点、克隆、重排或发起请求：
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const draggedEl = document.getElementById(id);
if (draggedEl && dropZone !== draggedEl.parentElement) {
dropZone.appendChild(draggedEl); // 直接移动 DOM 节点
}
});
若需支持跨页面拖拽（如从 A 页面拖到 B 页面），需配合 dataTransfer.items 使用文件/文本等通用格式，且目标页需监听 drop 并校验来源；浏览器通常限制跨域页面间的数据传递，实际项目中更推荐单页内交互或用 postMessage 辅助。
补充细节：提升健壮性与体验
原生拖拽有若干“隐形规则”，处理好能避免常见故障：
-
不要在 dragstart 中修改样式：拖影是浏览器自动生成的快照，运行时改 class 或 display 无效；如需自定义拖影，用
dataTransfer.setDragImage(el, x, y) -
区分 move 与 copy：通过
e.dataTransfer.dropEffect和effectAllowed控制光标样式与行为，用户按 Ctrl 键可切换 copy 模式 -
移动端不支持原生 drag/drop：Safari/iOS Chrome 均未实现，需用
touchstart/move/end+ CSS transform 模拟，或引入interact.js等兼容库 -
避免嵌套可拖拽容器冲突：若子元素也 draggable，事件可能冒泡干扰，可用
e.stopPropagation()在子级 dragstart 中拦截
