vue.js - 有没有办法将 Vue.Draggable 拖放区扩展到可拖动自定义标签之外？

Question

我有一个场景，我有多个带有标题的容器，然后是将在 vue.draggable 和页脚上使用的列表。

我已经设法将列表部分放在多个容器之间进行拖放操作，但前提是我将它们放在容器的列表区域中。

我的理想情况是可以在整个容器中放置，这样我也可以在页眉/页脚中放置一个列表项(可能默认将其添加到列表的位置 0)。

我已经尝试在列表项和父 div 上创建额外的 vue.draggable 自定义标签，但它没有帮助，因为现在我们可以拖动整个父 div。

这是我拥有的几个容器的基础的 vue 模板:

<template>
  <div class="container">
    <div class="header">
      <p>{{header}}</p>
    </div>
    <div class="body">
      <draggable class="drag-area" :list="items" group="default">
        <div v-for="item in items" :key="item.id">
          <drag-item :item="item"></drag-item>
        </div>
      </draggable>
    </div>
    <div class="footer">
      <p>{{footer}}</p>
    </div>
  </div>
</template>

有什么办法可以将拖动项拖到整个容器中吗？即把它放在页眉/页脚中？

我正在使用 vue 2.6.10 和 vuedraggable 2.23.0

Answer 1

设置 :empty-insert-threshhold="100"将增加放置半径，以便更轻松地将项目放入列表中。

    <draggable
      tag="ol"
      :empty-insert-threshhold="500"
      v-model="list"
     ...
    >...</draggable>