# simple-draggable-component-vue > Simple draggable component for VueJS 3.x Latest version **1.0.3** (published 2023-07-21) · 0 weekly downloads ## Install ```sh npm install simple-draggable-component-vue pnpm add simple-draggable-component-vue yarn add simple-draggable-component-vue bun add simple-draggable-component-vue ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.3 | | Published | 2023-07-21 | | First published | 2023-06-17 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 25.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | amalakhmadinurov | ## Links - npm: https://www.npmjs.com/package/simple-draggable-component-vue - npm.io page: https://npm.io/package/simple-draggable-component-vue ## Dependencies (2) - [vue](https://npm.io/package/vue.md) ^3.2.47 - [sass](https://npm.io/package/sass.md) ^1.63.4 ## Recent versions - 1.0.3 (latest) — 2023-07-21 - 1.0.2 — 2023-07-08 - 1.0.1 — 2023-07-07 - 1.0.0 — 2023-06-17 ## README # simple-draggable-component-vue Simple draggable component for VueJS 3.x ## Demo [Demo](https://amalakh.github.io/simple-draggable-component-vue-demo/) ## Installation ``` npm i simple-draggable-component-vue ``` ## Usage ### Basic example ``` ``` ### Example with transitions ``` ``` ### 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; } ``` --- _Source: https://npm.io/package/simple-draggable-component-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._