Sortable

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.

  • Lorem, ipsum.
  • Impedit, quod!
  • Repudiandae, rerum.
  • Ab, doloremque!
  • Totam, consectetur.
  • Laborum, cum!
 import Sortable from "@natachah/vanilla-frontend/js/_sortable" const myList = document.getElementById('mySortableList') if (myList) new Sortable(myList)

Handle

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

Javascript

To enable this component you need to import the javascript file and create a new Sortable object.

Methods

Method Description

resetEvents()

This method will reset the items and events

Events

Event 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 ... })