sortablejs vue 禁止拖拽

要禁止拖拽，你可以使用 SortableJS 提供的 disabled 选项。在 Vue 中，你可以使用 v-bind 指令来绑定 SortableJS 的配置项。以下是一个禁止拖拽的示例：

<template>
  <div>
    <div ref="list" v-bind:sortable="sortableOptions">
      <div v-for="(item, index) in list" :key="item.id">
        {{ item.text }}
      </div>
    </div>
    <button @click="toggleDrag">Toggle Drag</button>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
      sortableOptions: {
        disabled: true,
      },
    };
  },
  mounted() {
    this.sortable = Sortable.create(this.$refs.list, {
      onEnd: this.onSortEnd,
    });
  },
  methods: {
    onSortEnd(event) {
      // update the list after sorting
      const itemEl = event.item;
      const newIndex = event.newIndex;
      const oldIndex = event.oldIndex;
      this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
    },
    toggleDrag() {
      // toggle drag and drop
      this.sortable.option('disabled', !this.sortable.option('disabled'));
    },
  },
};
</script>

在上面的示例中，我们使用了 SortableJS 的 disabled 选项来禁止拖拽。我们在组件的 data 中定义了 sortableOptions 对象，并将其绑定到 SortableJS 的配置中。然后，在 mounted 钩子函数中，我们使用 SortableJS 的 create 方法创建了一个 Sortable 实例，并将其绑定到组件的 this.sortable 变量上。最后，在 toggleDrag 方法中，我们使用 SortableJS 的 option 方法来切换 disabled 选项的值。