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

У меня есть сценарий, в котором у меня есть несколько контейнеров с заголовком, затем список, который будет использоваться в 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


vue.js drag-and-drop sortablejs vue.draggable
person NameNotFoundException    schedule 13.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Установка :empty-insert-threshhold="100" увеличит радиус перетаскивания, чтобы упростить перетаскивание элементов в список.

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