vue-draggable-virtual-scroll-list

import Vue from 'vue'; import { DraggableVirtualList } from 'vue-draggable-virtual-scroll-list'; // Define the individual item component const Item = { props: { source: { type: Object, default: () => ({}), }, }, template: ` <div class="phrase" :key="source.id" style="padding: 10px; border-bottom: 1px solid #eee; background-color: white;"> {{ source.content }} </div> `, }; new Vue({ el: '#app', components: { DraggableVirtualList, }, data() { const items = []; // Generate a large number of items for virtualization demo for (let i = 0; i < 1000; i++) { items.push({ id: i, content: `Item ${i + 1} - Drag me!`, // Example content }); } return { items: items, Item: Item, // Pass the local Item component to the DraggableVirtualList }; }, template: ` <div id="app"> <h2>Draggable Virtual List Example</h2> <p>Drag and drop items in this list. It efficiently handles 1000 items.</p> <draggable-virtual-list class="phrase-list" v-model="items" :size="50" // Estimated height of each item in pixels :keeps="20" // Number of items to keep rendered outside the viewport :data-key="'id'" // Unique key for each item in the data source :data-sources="items" // Data source for the virtual list :data-component="Item" // Component to render each item style="height: 400px; overflow-y: auto; border: 1px solid #ccc;" > </draggable-virtual-list> </div> `, });