Tartib

Reorder a list of DOM elements, by dragging an element within the list to occupy another position, other elements will shift to create a slot for the dragged element.

Features

• No dependencies.
• Lightweight.
• Mobile friendly.
• Sort list with items aligned horizontally, vertically or in a grid.

Demo

Click here

Getting started

Install using package manager:

npm install tartib

or

yarn add tartib

and import files:

// Import javascript.
import tartib from 'tartib';

// Import css.
import 'tartib/dist/css/tartib.min.css';

CDN

Add a direct link to your page.

• Jsdelivr CDN

<!-- Style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tartib/dist/css/tartib.min.css">

<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/tartib/dist/js/tartib.min.js"></script>

• Unpkg CDN

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/tartib/dist/css/tartib.min.css">

<!-- Script -->
<script src="https://unpkg.com/tartib/dist/js/tartib.min.js"></script>

Usage

<ul id="my-list" class="tartib">
  <li class="tartib__item">One</li>
  <li class="tartib__item">Two</li>
  <li class="tartib__item">Three</li>
  <li class="tartib__item">Four</li>
</ul>

// The second argument (options) is optional.
const tartib = new Tartib('#my-list', {
  // Options...
});

Options

Option	Type	Default	Description
dragFrom	Object	{}	Object with x, y properties, drag items from the same position, x and y represent the coordinates relative to the dragged item's top left corner, x and y can be numbers or percentages, e.g. { x: '50%' } to center it horizontally.
cursor	String	''	Set the cursor while dragging an item (CSS cursor property).
elevation	Boolean	true	Adds a box shadow to the dragged item.
active	String	''	Add classes (space separated) to the dragged item, those classes will be removed when the item is dropped
placeholder	String	''	Add classes to the placeholder (The empty slot).
dragHandle	String|Element	''	A selector or an Element, use it as a drag area within the item.
axis	String	''	Lock movement to only one axis 'x' or 'y'
disabled	Boolean	false	Disable/Enable sorting
opacity	Number	1	Apply opacity to the dragged item (during dragging), value must be between 0 and 1 exclusive
autoScroll	Boolean	true	Auto scroll while dragging an item, to show out of viewport items.
rtl	Boolean	false	Right to Left direction

Events

Event	Argument	Description
start	event	is fired when the item starts to move.
move	event	is fired when the item is moving
sort	event	is fired when the item changes its position.
change	event	is fired when the list items order changes.
end	event	is fired when the item is dropped.

Event Handler parameter

• x: number — Item x coordinate.
• y: number — Item y coordinate.
• target: Element — The Dragged Item.
• relatedTarget: Element — When hover over or touch other list item while dragging an item.
• placeholder: Element — Item slot.
• items: Array — List items.
• getData(attribute : String) : Array — Array of each item attribute value.

Methods

• setOptions(options: Object) — Sets one or more options.
• on(type: String, handler: callback) — Adds an event listener.
• off(type?: String, handler?: callback) — Removes an event handler, if the handler argument is omitted then all handlers attach to this event will be removed, calling this method without arguments will remove all handlers of all events.
• getData(attribute: String) : Array — Array of each item attribute value.
• disable() — Disables sorting.
• enable() — Enables sorting.
• destroy() — Removes this instance functionality (free up memory).