有没有一种方法可以将Vue.Draggable拖放区域扩展到可拖动的自定义标记之外？

Question

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

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

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

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

下面是我拥有的几个容器的基础的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>