Skip to content

yairEO/dragsort

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Knobs

DragSort
lightweight HTML5 drag-&-drop sorting

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)