Musare/vue-draggable-list

A drag and drop lists component compatible with Vue 3

vue-draggable-list

npm

vue-draggable-list is a vue drag and drop component utilising mobile-drag-drop.

Originally created for Musare.

Dependencies

• Vue 3
• NodeJS v16+

Installation

1. Install the package

   npm install vue-draggable-list

2. Import styling in to your package globally

   @import "vue-draggable-list/dist/style.css";

3. Import component

   import { DraggableList } from "vue-draggable-list";

4. Use the component

   <draggable-list
       item-key="_id"
       v-model:list="myList"
       :attributes="{
           class: element => ({
               'left': element.left
           }),
           title: 'Title'
       }"
       tag="div"
       group="myGroup"
       :disabled="isListDisabled()"
       :touch-timeout="250"
       @start="drag = true"
       @end="drag = false"
       @update="updateList"
   >
       <template #item="{ element, index }">
           <my-element :data="element" :index="index" />
       </template>
   </draggable-list>

Props

Name	Type	Default	Optional	Description
itemKey	String		No	Name of the property that is unique in each list item.
list	Array		No	List of items, if defined as a v-model any updates will be applied to provided list.
attributes	Object		Yes	Object of functions or attributes of any type that will be called or applied to each item and added as an attribute.
tag	String	div	Yes	Name of the HTML element of each item.
group	String		Yes	Name of the group, so you can move items between different lists in the same group. Leaving it empty will disable moving between lists.
disabled	Boolean or Function	false	Yes	Used to disable dragging inside a list in general, or with a function you can prevent specific items from being dragged.
touchTimeout	Number	250	Yes	Time in milliseconds that a user is required to hold list item before dragging is started.

Emits

Name	Data	Description
start		Emitted when dragging starts.
end		Emitted when dragging stops.
update	{ moved: { oldIndex: Number, newIndex: Number, updatedList: Array }	Emitted when an element is dropped in the same list, which returns the old and new index and the new list of items.