元素重排后dragstart事件无法触发的技术问题

这个问题我之前做拖拽重排功能时也碰到过，大概率是因为你手动操作DOM移除并插入元素后，原有的事件绑定或者框架指令失效导致的。下面给你几个针对性的解决方案，一步步排查：

1. 改用事件委托绑定dragstart事件 #

如果之前是给每个列表项单独绑定dragstart事件，当元素被移除再插入DOM时，在部分框架环境（比如Vue）里，原有的事件绑定可能会丢失。换成给父元素<ul>绑定事件委托，这样不管子元素怎么变动，事件都能被捕获到：

// 给父ul绑定dragstart事件，而不是每个<li>
document.querySelector('.draggable-list').addEventListener('dragstart', function(e) {
  // 确保触发事件的是列表项
  if (e.target.tagName.toLowerCase() === 'li') {
    drag(e); // 调用你原来的drag处理方法
  }
});

这种方式的好处是，父元素的事件监听是持久化的，子元素的增删不会影响事件的触发。

2. 用框架响应式数据驱动列表（推荐） #

如果你是用Vue、React这类前端框架开发，不要手动操作DOM来移动元素，而是通过修改列表的数据源数组来实现重排，让框架自动渲染列表。这样所有的指令（比如dragstart.trigger）都会被框架重新正确绑定，不会出现事件失效的问题：

举个Vue的例子：

// 假设你的组件里维护着列表数据items
methods: {
  drag(e) {
    // 存储被拖拽项的索引
    e.dataTransfer.setData('text/plain', e.target.dataset.index);
  },
  drop(e) {
    e.preventDefault();
    const sourceIndex = parseInt(e.dataTransfer.getData('text/plain'));
    const targetIndex = parseInt(e.target.dataset.index);
    
    // 修改数组顺序，框架会自动重新渲染列表
    const [movedItem] = this.items.splice(sourceIndex, 1);
    this.items.splice(targetIndex, 0, movedItem);
  },
  dragover(e) {
    // 必须阻止默认行为，否则drop事件不会触发
    e.preventDefault();
  }
}

模板里只需要根据items渲染列表，所有的拖拽指令都会正常工作，完全避免手动DOM操作带来的问题。

3. 检查draggable属性是否被意外移除 #

有时候在移除/插入DOM的过程中，元素的draggable="true"属性可能会被意外重置。你可以在drop方法执行完毕后，手动给被拖拽元素重新设置这个属性：

drop(e) {
  // 你的原有逻辑：移除元素、插入到目标位置
  const draggedElement = document.getElementById('your-dragged-item');
  // 确保元素依然可拖拽
  draggedElement.setAttribute('draggable', 'true');
}

4. 确保正确处理dragover事件 #

别忘了，drop事件能触发的前提是在dragover事件中调用了e.preventDefault()，否则浏览器的默认拖拽行为会阻止drop事件触发。如果之前没处理这个事件，也可能导致后续拖拽异常：

document.querySelector('.draggable-list').addEventListener('dragover', function(e) {
  e.preventDefault();
});

内容的提问来源于stack exchange，提问作者Beginner