11

我有一个场景，我有多个带有标题的容器，然后是将在 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

4

1 回答 1

1

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

    <draggable
      tag="ol"
      :empty-insert-threshhold="500"
      v-model="list"
     ...
    >...</draggable>
于 2021-02-17T18:47:48.073 回答