如何让动态添加的li组件在对应ul父容器中可排序？

我来帮你搞定这个问题！动态添加的<li>没法被拖拽排序，核心原因是jQuery UI Sortable在初始化时，只会对当时已经存在于DOM中的元素生效——你后来动态追加的<li>并没有被纳入Sortable的管理范围，自然就不能拖拽啦。

具体解决方案 #

你只需要在每次成功添加新<li>之后，调用Sortable的refresh方法，让它重新扫描容器内的元素，把新添加的项纳入可排序集合就行。下面是完整的代码示例：

1. 初始化Sortable（页面加载完成后执行）

$(document).ready(function() {
  // 替换成你的ul的选择器，比如#mySortableUl
  $('#mySortableUl').sortable({
    // 这里可以加你的配置项，比如占位样式
    placeholder: "ui-state-highlight"
  }).disableSelection(); // 可选：禁用文本选中，提升拖拽体验
});

2. 处理动态添加li的逻辑（用事件委托绑定动态按钮）

因为你的添加按钮是动态生成的，直接绑定点击事件会失效，所以要用事件委托来绑定：

// 绑定动态生成的按钮的点击事件
$(document).on('click', '.add-li-button', function() {
  // 获取对应textbox的值
  const inputValue = $(this).siblings('input[type="text"]').val().trim();
  
  if (inputValue) {
    // 创建新的li并追加到ul中
    const newLi = $(`<li>${inputValue}</li>`);
    $('#mySortableUl').append(newLi);
    
    // 关键一步：刷新Sortable，让新li可排序
    $('#mySortableUl').sortable('refresh');
  }
});

额外检查点 #

• 确保你已经正确引入了jQuery和jQuery UI脚本，顺序要对：先引入jQuery，再引入jQuery UI。
• 确认ul的选择器（比如#mySortableUl）和动态按钮的类名（比如.add-li-button）和你实际代码里的一致，别写错拼写。
• 如果你的Sortable有特殊配置（比如axis、containment），直接保留在初始化的配置对象里就行，refresh不会覆盖这些配置。

这样修改之后，你动态添加的每个<li>都能正常被拖拽排序啦！

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