求推荐支持HTML元素增删、拖拽重排的JavaScript库

有多个成熟的轻量JavaScript库可以同时满足DOM元素动态增删、拖拽排序的需求，不需要从零手写相关逻辑，最推荐的选型如下：

SortableJS #

这是目前同类场景下生态最成熟、使用最广泛的方案，完全覆盖你的所有需求：

• 拖拽排序能力：原生支持容器内元素拖拽换位、跨容器拖拽，自带平滑拖拽动画，支持自定义拖拽触发区域、占位样式、拖拽锁定规则，无jQuery或其他重型框架依赖，兼容性覆盖所有主流浏览器
• 动态DOM适配：容器初始化完成后，你后续通过任意方式新增、删除子元素时，不需要重新初始化实例，库会自动识别DOM结构变动，新增的元素直接具备拖拽能力，删除元素也不会产生内存残留问题

针对你给出的DOM结构，基础初始化代码如下：

// 给父容器绑定拖拽排序能力
new Sortable(document.getElementById('parent'), {
  animation: 150, // 拖拽换位的动画时长，单位ms
  dragClass: 'sortable-drag', // 拖拽中元素的样式类名
  // 拖拽排序完成后的回调，可在这里同步最新的元素顺序
  onEnd: function(evt) {
    console.log('被拖拽元素原位置：', evt.oldIndex, '新位置：', evt.newIndex)
  }
})

元素的增删操作直接使用原生DOM方法实现即可，配合事件委托可以给动态生成的元素绑定事件：

// 绑定删除按钮逻辑（兼容后续动态新增的子元素）
document.getElementById('parent').addEventListener('click', function(e) {
  if (e.target.tagName === 'BUTTON' && e.target.textContent.trim() === 'remove') {
    e.target.closest('.child').remove()
  }
})

// 新增子元素方法，插入DOM后自动支持拖拽
function addNewChild(seq) {
  const childEl = document.createElement('div')
  childEl.className = 'child'
  childEl.id = `child-${seq}`
  childEl.innerHTML = `<input name="child-${seq}"><button>remove</button>`
  document.getElementById('parent').appendChild(childEl)
}

Dragula #

如果你对前端包体积有更严格的要求，也可以选择Dragula，它的API设计更简洁，压缩后体积仅几KB，同样支持动态DOM元素的自动识别和拖拽排序，缺点是可配置项少于SortableJS，自定义复杂拖拽交互的灵活度稍低。

实用提示：如果你的场景需要提交表单，记得在拖拽排序、增删元素完成后，按照当前DOM的展示顺序收集所有input的值，或者同步更新input的name属性，避免提交的字段顺序和页面展示顺序不一致。

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