Installation

npm i @yaireo/dragsort --save

Pre-setup suggestions:

• Set box-sizing: border-box on the list or its children is a good idea
• Use the provided stylesheet in this package - dist/dragsort.css

Usage

HTML

<ul class="list">
    <li>drag & drop</li>
    <li>items</li>
    <li>easily</li>
    <li>with this</li>
    <li>super lightweight script</li>
</ul>

javascript

import DragSort from '@yaireo/dragsort'
import '@yaireo/dragsort/dist/dragsort.css'

const listElm = document.querySelector('.list')
const dragSort = new DragSort(listElm)

Note - useful class names are set on elements being dragged.

Settings

Name | Type | Default | Info ----------------------- | ----------- | ------------------------------------------ | -------------------- selector | String | all child nodes of first parameter | which elements should be draggable mode | String | | Use "vertical" for vertical-lists re-ordering callbacks.dragStart | Function | | callback function when dragging started. Arguments are (element, event) callbacks.dragEnd | Function | | callback function when dragging finished. Arguments are (element, event)