Question

我正在尝试使用vue-draggable显示可拖动元素的列表，这些元素有时在给定位置被固定元素分隔。

到目前为止，我尝试了以下方法：在v-for循环中需要时创建另一个元素。

<draggable :list="list" class="dragArea" :class="{dragArea: true}" 
           :options="{group:'people', draggable: '.drag'}" @change="handleChange">
    <template v-for="(element, index) in list">
      <div class="drag">
        {{element.name}}
      </div>
      <div class="nodrag" v-if="index === 2">Fixed element</div>
    </template>
</draggable>

但是，由于onChange事件返回的索引已不再是期望值，因此它破坏了我的应用程序的行为。（您可以在this jsfiddle上查看复制品）

我做错了吗？我还考虑过使用move道具来禁用建议的here的拖动功能，但是问题仍然存在，因为我使用的是我相信的可拖动列表之外的元素。

在我们的生产用例中，如果重要的话，固定元素的索引就是变量。

Answer 1

问题是您需要将“固定元素”作为要包含在传递给Vue的数组中的数据。Draggable...您也不能使用v-if，因为SortableJS会将这些元素视为元素，即使尽管它们不可见，因为VueJS留下了不可见元素，并带有v-if作为注释... SortableJS将为这些注释建立索引。因此，请在John3之后将一个项目添加到您的数组中，并摆脱v-if ..而是在您的对象中包含一个draggable属性，并且仅在该元素具有{{ 1}}属性设置为true。最后一个问题是Sortable不会索引不可拖动的元素，但是在以后的更新中可能会解决此问题。我建议您暂时使用'drag'选项。

示例（不使用draggable）：https://jsfiddle.net/3wrj07et/5/

Answer 2

您可以在 move 组件中使用 draggable，然后指定哪些元素将成为 fixed。像这样：

<draggable
  :list="list"
  :disabled="!enabled"
  class="your_class"
  :move="checkMove"
  @start="dragging = true"
  @end="dragging = false"
>
...
</draggable>

...........

data() {
  return{
    list: [{foo: "bar", ..., fixed: true}, {foo: "bar", ...}, {foo: "bar", ...}, {foo: "bar", ..., fixed: true}]
  }
}

...........

methods: {
  checkMove(e) {
    return !this.list[e.draggedContext.futureIndex].fixed
  }
}

如何在Vue可拖动列表旁边设置固定元素

2 个答案: