Sortable JS

import Sortable from "@natachah/vanilla-frontend/js/_sortable"

Syntax

The sortable component make you able to change the order of a list..

The list can be an <ul>, <ol>, <div> or <tbody> tag.

Each children must have a draggable="false" attribute. The attribute will be changed when drag start.

html

<ul id="mySortableList" class="demo-sortable">
    <li draggable="false">Lorem, ipsum.</li>
    <li draggable="false">Impedit, quod!</li>
    <li draggable="false">Repudiandae, rerum.</li>
    <li draggable="false">Ab, doloremque!</li>
    <li draggable="false">Totam, consectetur.</li>
    <li draggable="false">Laborum, cum!</li>
</ul>

js

import Sortable from "@natachah/vanilla-frontend/js/_sortable"
const sortables = document.querySelectorAll('.demo-sortable')
if (sortables) sortables.forEach(sortable => new Sortable(sortable))

Options

Handles

You can decide which part of the item is draggable with the data-handle="sortable" attribute.

<ul id="mySortableListWithHandle" class="demo-sortable">
    <li draggable="false">
        <b data-handle="sortable">
            Handle
        </b>
        Lorem, ipsum.
    </li>
    <li draggable="false">
        <b data-handle="sortable">
            Handle
        </b>
        Impedit, quod!
    </li>
    <li draggable="false">
        <b data-handle="sortable">
            Handle
        </b>
        Repudiandae, rerum.
    </li>
</ul>

Javascript

Methods

Method	Description
resetEvents()	This method will reset the items and events

Events

Event name	Description	Value
sortable:drag	This event is fired when the you start dragging an item	items as a Collection and current as HTMLElement
sortable:drop	This event is fired when the you drop an item	items as a Collection and current as HTMLElement

const mySortable = document.getElementById('mySortableList')

mySortable.addEventListener('sortable:drag', (e) => {
    const theCollectionOfItems = e.detail.items
    const thecurrentItem = e.detail.current
    ...
})