feature Request: Make compatible with vue-virtual-scroller

[theSilverFisch]

I'm currently trying to combine the vue-virtual-scroller with draggablePlus. Apparently the drag items can not be obtained if they are rendered within the dynamic scrollerItem. My current setup is as follows:

<DynamicScroller page-mode class="scroller" :items="vScrollItems"
  :min-item-size="ticketHeight" key-field="docUUID"
  v-draggable="[vScrollItems, draggableDirectiveConf]">
  <template v-slot="{ item, index, active }">
    <DynamicScrollerItem :item="item" :active="active" :data-index="index" class="ticketDrag">
      <ticket-item :key="item.docUUID"
        :ticketItemId="item.docUUID" />
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

const vScrollItems = [
  {
    docUUID:'77d8f970-bace-4d34-bcc0-6c932242e0ae'
  },
  {
    docUUID: '76d8f970-bace-4d34-bcc0-6c932242e0ae'
  },
  {
    docUUID: '77d8f970-bace-4d34-bcc0-9c932242e0ae'
  }
];
const ticketDrag = {
  name: 'ticketSort',
  pull: ['ticketSort'],
  put: ['ticketSort']
};
const draggableDirectiveConf = {
  animation: 150,
  target: '.ticketDrag',
  group: ticketDrag,
  handle: ".v-card-item__prepend"
}

whilst the ticket-item is a seperate component containing a vuetify card. No Matter if I use target or el or place the class on the ticketItem or the scrollerItem, it always selects all items within the dynamicScroller for dragging, not each individually. Or am I doing something wrong here?

Regards

[Alfred-Skyblue]

Sorry, the directive cannot use the target container, you can try to use the target container in the component

[Alfred-Skyblue]

<template>
  <section>
    <div>
      <VueDraggable v-model="list" animation="150" target=".el-table">
        <ElTable :list="list"></ElTable>
      </VueDraggable>
    </div>
    <div class="flex justify-between">
      <preview-list :list="list" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import ElTable from './ElTable.vue'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
</script>

[theSilverFisch]

<template>
  <section>
    <div>
      <VueDraggable v-model="list" animation="150" target=".el-table">
        <ElTable :list="list"></ElTable>
      </VueDraggable>
    </div>
    <div class="flex justify-between">
      <preview-list :list="list" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import ElTable from './ElTable.vue'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
</script>

so you say

.el-table

should be a class within the component

 <ElTable :list="list"></ElTable>

sadly this has the same result. Clicking the handle of one item lets me drag the whole column, not just a single item entry

[Alfred-Skyblue]

What you need to do is to find a way to obtain the parent element of the dragged item, and pass it to useDraggable. You can refer to the demo for guidance.

https://stackblitz.com/edit/vitejs-vite-rdvmys?file=src/App.vue

[204065248]

What you need to do is to find a way to obtain the parent element of the dragged item, and pass it to useDraggable. You can refer to the demo for guidance.你需要做的是找到一种方法来获取拖动项的父元素，并将其传递给 useDraggable。您可以参考演示以获取指导。

https://stackblitz.com/edit/vitejs-vite-rdvmys?file=src/App.vue

这个拖拽库不支持虚拟列表的