时间戳

首页 > 解决方案 > 如何在 vue 可拖动列表旁边设置固定元素

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

问题描述

我正在尝试使用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事件返回的索引不再是预期的。（您可以在此 jsfiddle上查看复制品）

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

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

标签： javascriptvue.jsdraggablesortablejs

解决方案

您可以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
  }
}

推荐阅读