@yaireo/dragsort

    1.3.1 • Public • Published

    drag-sort demo

    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)

    Keywords

    none

    Install

    npm i @yaireo/dragsort

    DownloadsWeekly Downloads

    1,532

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • vsync