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;
    }