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

Posted 2023-02-23

【中文标题】如何在 vue 可拖动列表旁边设置固定元素

【英文标题】：How can I set a fixed element alongside vue draggable list

【发布时间】：2019-04-16 11:19:53

【问题描述】：

我正在尝试使用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 那样，但问题仍然存在，因为我相信我正在使用可拖动列表之外的元素。

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

【问题讨论】：

那么固定元素的位置不应该改变吗？还是它们只是不可拖动？

固定元素的位置不应该改变，它之前和之后应该有相同数量的可拖动项目。它实际上代表某种阈值

你为什么不列两个清单呢？否则，期望实际上是没有意义的。如果在固定之前有 2 个元素，在固定元素之后有 2 个元素 --> 那么你将 1 个元素从固定之前移动到之后，那么，固定之前的元素是什么？一个空字符串？

假设你有 A,B,Fixed,C,D 并且你将 B 移动到 C 和 D 之间，那么你应该得到 A,C,Fixed,B,D 理想情况下我希望 Fixed 只是可拖动组件逻辑完全忽略的视觉标志

我会听一些 onChange 事件，然后手动将元素移动到固定元素的上方/下方。当使用像 vue-draggable 这样的东西时，你必须记住，如果它不是根据你所想的功能开发的，你可能不得不自己创建它，即“手动”上下移动它们。您还可以 fork vue-draggable 或发出拉取请求以添加功能，这样您就可以保持代码更简洁。

【参考方案1】：

您可以在draggable 组件中使用move，然后指定哪些元素将是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
  

【参考方案2】：

问题是你需要将你的“固定元素”作为数据包含在你传递给 Vue.Draggable 的数组中......你也不能拥有 v-if 因为 SortableJS 会将它们计为一个元素，即使它们不可见，因为 VueJS 将带有 v-if 的不可见元素作为 cmets... SortableJS 将索引这些 cmets。因此，在 John3 之后将一个项目添加到您的数组中，并去掉 v-if.. 而是在您的对象中包含一个 draggable 属性，并且仅在该元素将 draggable 属性设置为时才设置 'drag' 类真的。最后一个问题是 Sortable 不会索引不可拖动的元素，但这可能会在以后的更新中修复。我建议你现在使用filter 选项。

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