@yaireo/dragsort NPM

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)`