Vue-draggable-list NPM

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

Install the package
```
npm install vue-draggable-list
```

Import styling in to your package globally

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

Import component

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

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()"
    @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.

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.

vue

@infinitebrahmanuniverse/nolb-vue-dr @everything-registry/sub-chunk-3079

1 year ago

1 year ago

2 years ago

2 years ago