如何使用DragulaJS仅通过指定按钮触发卡片拖拽排序

要实现仅通过.drag-handle按钮触发.card元素的拖拽排序，无需将手柄设为容器，直接利用Dragula的handle配置项即可完成需求：

1. 将包含所有卡片的父容器#container设为Dragula的容器，让Dragula识别容器内的.card作为可拖拽单元
2. 通过handle配置指定触发拖拽的元素选择器，限制只有点击该元素时才触发卡片拖拽

修改后的JS代码如下：

const dragulaV = dragula([document.getElementById('container')], {
  revertOnSpill: true,
  handle: '.drag-handle' // 指定仅通过该选择器的元素触发拖拽
});

关键说明 #

• Dragula默认会把容器的直接子元素作为可拖拽对象，这里#container的直接子元素是.card，正好符合我们要拖拽整个卡片的需求
• handle: '.drag-handle' 配置会让Dragula监听该选择器元素的点击/拖动事件，只有当用户操作这个手柄按钮时，才会带动对应的.card元素进行拖拽，卡片的其他区域不会触发拖拽

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