Есть ли способ расширить зону перетаскивания Vue.Draggable за пределы перетаскиваемого пользовательского тега?

Question

У меня есть сценарий, где у меня есть несколько контейнеров с заголовком, а затем список, который будет использоваться на vue.draggable и нижний колонтитул.

Мне удалось поместить часть списка, работающую с перетаскиванием между несколькими контейнерами, но только если я перетяну их в область списка контейнеров.

Мой идеальный сценарий - сделать так, чтобы удаление было возможным во всем контейнере, чтобы я мог удалить элемент списка также в верхнем / нижнем колонтитуле (возможно, по умолчанию, чтобы добавить его в позицию 0 списка).

Я попытался создать дополнительные пользовательские теги vue.draggable не только для элементов списка, но и для родительского элемента div, но это не помогло, поскольку теперь мы можем перетащить весь родительский элемент 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>