vue 下拉框实现拖拽

在Vue中实现下拉框的拖拽功能，可以通过结合Vue的指令和第三方库如 Sortable.js 来完成。Sortable.js 是一个用于将列表项排序的JavaScript库，它提供了一个简单的接口来实现拖拽排序功能。以下是基本的实现步骤：

1. 引入Sortable.js库到你的Vue项目中。
2. 创建一个Vue组件，定义下拉框的内容，例如一个列表。
3. 使用`v-for`指令来渲染列表项。
4. 使用`v-model`来绑定选中的值。
5. 在组件挂载后，使用Sortable.js初始化列表，使其支持拖拽排序。
6. 通过Sortable提供的事件，如`update`，来更新列表项的顺序，并且更新绑定的数据。

下面是一个简单的示例代码：

<template>
  <div>
    <ul id="sortable" v-sortable="options">
      <li v-for="(item, index) in list" :key="item.value">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      list: [
        { text: 'Option 1', value: 1 },
        { text: 'Option 2', value: 2 },
        { text: 'Option 3', value: 3 }
      ],
      options: {
        group: 'shared',
        onEnd: (/**Event*/ evt) => {
          // evt.item 是被拖拽的元素
          // evt.to 是目标列表
          // evt.oldIndex 是原来的索引
          // evt.newIndex 是新的索引
          console.log('onEnd', evt);
        }
      }
    };
  },
  mounted() {
    new Sortable(this.$refs.list, this.options);
  },
  methods: {
    // 可以添加其他的方法，比如更新数据的逻辑
  },
  // 注意这里没有使用v-model，因为v-sortable已经处理了排序逻辑
};
</script>

<style>
/* 样式部分根据需要进行设置 */
#sortable li {
  margin: 0 0 5px;
  padding: 5px 10px;
  list-style-type: none;
}
</style>

上面的代码创建了一个Vue组件，其中有一个`<ul>`元素包裹了所有的`<li>`元素。`v-sortable`指令用于初始化Sortable实例，并且可以通过`options`来配置 sortable.js 的各种选项。`onEnd`方法会在拖拽结束后被触发，并可以在这里处理排序后的数据更新逻辑。