data属性本身不参与拖拽数据传递，必须在dragstart中显式调用datatransfer.setdata()才能传输数据，否则drop时getdata()返回空字符串。
data属性本身不参与拖拽数据传递
data- 属性只是 DOM 上的静态标记，浏览器原生拖拽 API 不会自动读取或序列化它。你在 dragstart 里不手动调用 e.dataTransfer.setData()，哪怕元素上有 data-index="5"，drop 时也拿不到这个值——getData() 返回空字符串是常态。
真正起作用的是你主动把 dataset.index 的值取出来，再塞进 dataTransfer：
element.addEventListener('dragstart', e => {
const index = e.target.dataset.index;
// ✅ 必须显式传出去
e.dataTransfer.setData('text/plain', index);
});
-
data-index只是方便你快速拿到索引，不是传输通道 - 如果列表动态渲染（比如 React/Vue），
dataset.index容易随重排失效，优先用稳定data-id - 别用
parseInt(e.target.getAttribute('data-index'))，dataset更语义、自动类型转换
为什么不能直接用 data-index 做插入判断
DOM 插入位置必须基于实时结构，而 data-index 是初始渲染时写死的。用户拖动 A 到 B 和 C 之间后，B 和 C 的 data-index 没变，但它们在 DOM 中的物理顺序已经变了。如果你还按“插入到 data-index="2" 元素前面”来算，就会插错位置。
- 正确做法：在
drop里用Array.from(container.children).indexOf(targetLi)算当前 DOM 索引 - 或者用
targetLi.previousElementSibling/nextElementSibling直接定位相邻节点 -
data-id只用来反查原始数据项，不参与插入逻辑
data-id 比 data-index 更可靠的原因
索引会随着每次拖拽重排而失效，但 data-id 是业务层赋予的唯一标识，不依赖顺序。比如一个按钮有 data-id="toolbar-save"，无论它被拖到第几位，ID 都不变。
- 在
dragstart中传e.dataTransfer.setData('text/plain', e.target.dataset.id) - 在
drop后，用这个 ID 去 state 数组里找原始项，再结合 DOM 位置更新数组顺序 - 避免用
data-index+splice()更新数组，容易因 DOM 渲染延迟导致索引错位
移动端和 Safari 的 data 属性陷阱
iOS Safari 对 dataTransfer 支持极弱，setData() 只认 'text/plain'，且 dataset 在事件委托中可能读不到——特别是动态插入的元素没及时绑定事件时。
- 确保
draggable="true"和data-id同时存在，并在元素挂载后立即绑定dragstart - 不要依赖
e.target.dataset在 touch 模拟逻辑里取值，改用e.currentTarget.dataset或预存映射表 - Safari 下
data-id值不能含空格或特殊字符，否则setData()可能静默失败
data- 属性只是辅助定位的“标签”，不是数据管道。最常被忽略的是：DOM 结构变化后，你还在用旧 dataset 值做插入计算——这会导致视觉顺序和数据顺序彻底脱钩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
