dragstart事件本身不能交换按钮位置，必须配合dragover、drop及draggable属性，通过DOM节点重排实现真实交换；关键是在drop中用insertBefore调整顺序，并在dragover和drop中均调用preventDefault()。
dragstart 事件本身不支持按钮位置交换
直接监听 dragstart 无法完成两个按钮的位置交换——它只在拖拽开始时触发，不提供目标位置信息，也不控制放置逻辑。真正起作用的是整套 HTML5 拖放 API：必须配合 dragover、drop 和元素的 draggable="true" 属性，且需阻止默认行为才能让 drop 触发。
交换按钮位置的关键是 drop 时 DOM 重排
两个按钮要“交换”，本质是把 A 插入到 B 原来的位置，同时把 B 插入到 A 原来的位置。不能靠 CSS 位移模拟（那样只是视觉错觉，DOM 结构没变），必须操作实际节点顺序。
- 给每个按钮设唯一
id或用data-index标记原始顺序 - 在
drop事件里，用event.target获取被拖到的目标按钮，用event.dataTransfer.getData("text/plain")拿到被拖按钮的标识 - 调用
insertBefore()或appendChild()调整父容器内子节点顺序，例如：const dragged = document.getElementById(draggedId); const target = event.target; const parent = target.parentNode; parent.insertBefore(dragged, target);
常见错误：drop 不触发或位置错乱
最常踩的坑是没在 dragover 里调 event.preventDefault()，导致浏览器阻止 drop；或者在 drop 里没取消默认行为，引发页面跳转或文件打开。
-
dragover必须加event.preventDefault()，否则drop不会触发 -
drop也要调event.preventDefault()，否则可能触发浏览器默认处理（比如打开图片） - 拖拽源按钮如果用了
visibility: hidden或display: none，会导致dragstart后视觉异常，建议用opacity: 0.5+pointer-events: none临时弱化 - 多个按钮放在同一父容器下才方便用
insertBefore精确插入；跨容器交换需额外记录父节点并分别操作
简单可运行示例（仅核心逻辑）
假设两个按钮同级，父容器为 id="container"：
立即学习“前端免费学习笔记（深入）”；
<div id="container"> <button draggable="true" data-id="btn1">按钮 1</button> <button draggable="true" data-id="btn2">按钮 2</button> </div>
JS 部分：
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', btn.dataset.id);
});
});
document.getElementById('container').addEventListener('dragover', e => e.preventDefault());
document.getElementById('container').addEventListener('drop', e => {
e.preventDefault();
const draggedId = e.dataTransfer.getData('text/plain');
const dragged = document.querySelector(`[data-id="${draggedId}"]`);
const target = e.target.closest('button');
if (target && dragged && target !== dragged) {
const parent = target.parentNode;
// 插入到 target 之前，实现“交换”效果
parent.insertBefore(dragged, target);
}
});
注意：这里用 closest('button') 是为了防止点到空白处触发 drop；真实场景中还要考虑拖拽源是否为自身、是否允许拖到非按钮区域等边界情况。
