如何在Sortablejs初始化完成后修改其配置

嘿，我懂你现在的困扰——Sortable已经通过那个不能修改的脚本初始化好了，现在想调整它的配置确实有点麻烦。不过别慌，Sortable本身提供了动态修改配置的方法，我来一步步教你怎么做：

第一步：获取已初始化的Sortable实例 #

原脚本里给每个.menu-item-list元素都创建了Sortable实例，但没把实例保存下来。不过没关系，Sortable提供了Sortable.get()方法，可以直接从DOM元素上获取对应的实例。你可以这样遍历所有目标元素拿到实例：

// 收集所有已初始化的Sortable实例
const sortableInstances = [];
document.querySelectorAll('.menu-item-list').forEach(element => {
  const sortable = Sortable.get(element);
  if (sortable) {
    sortableInstances.push(sortable);
  }
});

第二步：动态修改配置选项 #

拿到实例后，就可以用实例的option()方法来修改配置了——这个方法既可以获取当前配置，也可以设置新的配置项。

比如你想把动画时长从150改成300，或者重写onAdd回调函数，可以这么写：

// 遍历每个实例修改配置
sortableInstances.forEach(instance => {
  // 修改单个基础配置项
  instance.option('animation', 300);

  // 重写onAdd回调（保留原逻辑的同时加自己的代码）
  instance.option('onAdd', function(e) {
    // 先保留原脚本里的逻辑
    saveItemsPosition();
    removeEmptyAreaText(e.to);
    addEmptyAreaText(e.from);
    adjustHeightOfItemsContainer();
    removeSubmenuClass(e.item, e.to);
    // 再加你自己需要的额外操作
    console.log('元素已添加到新列，我加了自定义逻辑！');
  });

  // 要是想修改filter或者cancel选项也很简单
  instance.option('filter', '.new-empty-text');
});

一些需要注意的点 #

• 一定要确保这段修改代码在initSortable()执行之后运行！比如可以把它放在DOMContentLoaded事件的回调里，或者页面加载完成后的某个时机，不然会拿不到Sortable实例。
• 如果原脚本的initSortable是异步执行的，可能需要用setTimeout延迟一下，或者监听某个自定义事件来确认实例已经创建完成。
• 大部分Sortable的配置项都可以通过option()动态修改，不需要重新创建实例，非常方便。

备注：内容来源于stack exchange，提问作者oelimoe