vue-draggable如何固定位置

如果您要固定某个项目在Vue Draggable组件中的位置，您可以使用`v-bind:options`属性来设置`draggable`的选项，并将`fixed`选项设置为true。

下面是一个示例：

<template>
  <draggable v-model="list" :options="dragOptions">
    <div v-for="(item, index) in list" :key="item.id" :class="{ 'fixed-item': item.fixed }">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1', fixed: false },
        { id: 2, name: 'Item 2', fixed: true },
        { id: 3, name: 'Item 3', fixed: false },
      ],
      dragOptions: {
        animation: 200,
        fixed: function (evt, originalEvent) {
          return evt.item.fixed;
        }
      }
    };
  }
};
</script>

<style>
.fixed-item {
  background-color: yellow;
}
</style>

在上述示例中，我们在`list`数据中添加了一个`fixed`属性，用于标识项目是否是固定的。然后，我们在`dragOptions`中设置了一个回调函数，根据项目的`fixed`属性来确定项目是否应该是固定的。

在模板中，我们使用`v-for`指令遍历`list`数组，并为每个项目应用一个动态的CSS类名`fixed-item`。这样，我们可以通过CSS样式对固定的项目进行特殊的视觉效果。

请注意，`fixed`选项只会影响项目在拖拽期间的位置，而不会影响项目在列表中的顺序。如果您想要固定项目的顺序，可以在数据中设置项目的初始位置，并在`list`数组中按照所需的顺序排列。