jQuery Sortable：Handle是否需为调用时已存在DOM元素？动态元素如何处理？

首先直接给你明确答案：是的，默认情况下，当你初始化jQuery UI Sortable并设置handle选项时，只有在调用sortable()方法时已经存在于DOM中的匹配元素，才能成为有效的拖拽手柄。因为Sortable在初始化时会一次性完成事件绑定，不会自动监听后续动态添加的元素。

那要让后续动态添加的元素也能使用指定类作为handle，这里有两种靠谱的解决方式：

• 方法一：添加新元素后调用Sortable的refresh方法
  这是官方最推荐的做法。每次你动态添加完.member元素到列表后，不需要单独调用draggable()，只需要对已初始化的Sortable实例执行刷新操作，它会重新扫描DOM，把新元素纳入管理范围，同时自动绑定handle的拖拽事件：

  // 页面加载时先初始化Sortable
  $("#member-list").sortable({
    handle: ".drag-handle" // 假设你的拖拽手柄类是.drag-handle
  });
  
  // 动态添加元素的示例函数
  function addNewMember() {
    $("#member-list").append('<div class="member"><span class="drag-handle">☰</span> 新成员</div>');
    // 关键步骤：添加后刷新Sortable
    $("#member-list").sortable("refresh");
  }
  

  这样新添加的.member元素里的.drag-handle就能正常作为拖拽手柄实现排序了。你之前遇到的“仅能拖拽却无法排序”问题，就是因为单独调用draggable和Sortable的内置拖拽逻辑冲突了——Sortable本身已经封装了拖拽排序的完整逻辑，不需要再单独绑定draggable。

• 方法二：配合动态选择器强化识别（可选）
  如果你希望Sortable更精准地识别所有符合条件的元素（包括动态添加的），初始化时可以确保items选项使用动态选择器（比如.member），再结合refresh方法。不过实际上只要调用refresh，Sortable就会自动处理items和handle的匹配，所以方法一已经足够解决问题。

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