Vue组件sw-entity-multi-select是否支持添加拖拽排序功能？

原生sw-entity-multi-select组件没有内置拖拽排序的配置选项，默认选中项的顺序由选择时序或原始数据顺序决定。要实现选中值的拖拽排序，需要通过扩展组件结合第三方拖拽库来完成，以下是具体方案：

实现步骤 #

1. 引入拖拽依赖SortableJS #

SortableJS是轻量且易用的拖拽排序库，适合在Vue组件中集成。在项目中安装并导入：

npm install sortablejs --save

import Sortable from 'sortablejs';

2. 扩展组件并初始化拖拽逻辑 #

通过自定义组件或重写sw-entity-multi-select的方式，在组件生命周期钩子中初始化Sortable，绑定拖拽事件并更新选中值数组：

// 自定义扩展组件示例
export default {
  extends: 'sw-entity-multi-select',
  mounted() {
    this._superMounted(); // 调用父组件原mounted逻辑
    this.initSortable();
  },
  updated() {
    this.initSortable(); // 数据更新后重新初始化，避免拖拽失效
  },
  methods: {
    initSortable() {
      const selectedList = this.$el.querySelector('.sw-entity-multi-select__selected-list');
      if (!selectedList || selectedList.sortable) return;

      Sortable.create(selectedList, {
        animation: 150,
        handle: '.sw-entity-multi-select__selected-item', // 指定拖拽触发的元素
        onEnd: (evt) => {
          const { oldIndex, newIndex } = evt;
          // 调整选中数组的顺序
          const updatedSelected = [...this.selected];
          const [movedItem] = updatedSelected.splice(oldIndex, 1);
          updatedSelected.splice(newIndex, 0, movedItem);
          // 触发v-model更新
          this.$emit('update:modelValue', updatedSelected);
        }
      });
    }
  }
};

3. 添加拖拽视觉反馈（可选） #

为拖拽状态添加样式提示，提升用户体验：

.sw-entity-multi-select__selected-item {
  cursor: grab;
  transition: transform 0.15s ease;
}

.sw-entity-multi-select__selected-item:active {
  cursor: grabbing;
}

.sw-entity-multi-select__selected-item.sortable-ghost {
  opacity: 0.5;
  transform: scale(0.98);
}

4. 关键注意事项 #

• 确保selected数组是响应式的，拖拽后的数组更新能正确触发组件和父组件的状态同步。
• 若需持久化排序结果，需在拖拽结束后将新顺序提交到后端接口，更新数据库中的排序字段。
• 在Shopware Admin环境中，注意组件的渲染时机，避免在DOM未完全加载时执行初始化逻辑。

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