使用SortableJS实现动态生成待办项拖拽时拖拽整个列表问题求解

问题原因 #

• Sortable绑定的容器错误：你当前将Sortable绑定到了.todos-section节点，该节点的直接子元素只有.todos-list列表容器一个，所以拖拽时会选中整个列表移动，正确的绑定目标应该是.todos-list，它的直接子元素就是每个待办项。
• Sortable重复初始化：你把Sortable的初始化逻辑放在了addTodo函数内，每新增一个待办项就会重新初始化一次拖拽组件，多次重复初始化会导致功能异常，应该全局只初始化一次。
• 拖拽手柄配置缺失：你给拖拽按钮添加了.handle类，但是没有在Sortable配置中声明该手柄类，不符合预期的拖拽触发规则。

修改方案 #

JS代码修改 #

1、删除addTodo函数末尾的如下代码：

//DRAG AND DROP
const dragArea = document.querySelector('.todos-section');
new Sortable(dragArea, {
  animation: 300
});

2、在JS代码全局区域（选择器声明之后、事件监听声明之前即可）新增Sortable初始化代码：

// 全局仅初始化一次拖拽功能
new Sortable(todoList, {
  animation: 300,
  handle: '.handle' // 指定仅拖拽手柄可触发排序
});

CSS代码调整 #

删除.drag-btn的position: absolute属性，避免拖拽按钮脱离待办项父容器，修改后样式如下：

.drag-btn {
  display: block;
  background: white;
  border: 2px solid white;
}

修改完成后即可实现单个待办项的拖拽排序功能，只有点击左侧的汉堡图标才能触发拖拽，不会误操作其他功能按钮。

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