simple-draggable-component-vue v1.0.3

simple-draggable-component-vue

Simple draggable component for VueJS 3.x

Demo

Demo

Installation

npm i simple-draggable-component-vue

Usage

Basic example

<DraggableElement v-model="items">
    <template #item="{item}">
       <div>
           <p>{{ item.name }}</p>
       </div>
    </template> 
</DraggableElement >

Example with transitions

<DraggableTransitionElement name="list" item-key="id" v-model="items">
    <template #item="{item}">
       <div>
           <p>{{ item.name }}</p>
       </div>
    </template> 
</DraggableTransitionElement >

Props

modelValue type: Array required: false An array of objects

name (exist only in DraggableTransitionElement) type: String required: true Name of the transition class

itemKey (exist only in DraggableTransitionElement) type: String required: true Name of the object property to determine an unique id for every element of the list. Property of the object have to be String

enabled type: Boolean required: false default:true Determine if the element is enabled

put type: Boolean required: false default:true Determine if it is possible to put an element here

clone type: Function required: false default:function(item) { return item; } Function for clonning an element. Have to return an object.

tag type: String required: false default:"div" Tag name for wrapping items

group type: String required: false default:null Group name. When two draggable elements have different names, you can't clone items from one to another.

modelValue type: Array required: false default:null Array of the items

Events

movestart

Triggers when item starts moving

Example:

function movestart(index, item)
{
 //...
}

index - item index item - moving item

moveend

Triggers when item stop moving

Example:

function moveend(index, items)
{
 //...
}

index - item index items - moving item

moved

Triggers when item changes its position

Example:

function moved(prevIndex, newIndex, item)
{
 //...
}

prevIndex - previous index newIndex - new index item - current item

cloned

Triggers, when item is cloned. Triggers in the component, on which it was droped

Example:

function cloned(index, item)
{
 //...
}

index - current index item - current item

CSS customization

You can customize appearance of the dragging elements by these two classes

    .sdcv-dragging
    {
        //for element which is moved by cursor;
    }
    .sdcv-moving
    {
        //for element that is in the element;
    }