Performant & Touchable Drag And Drop Library – OmicronDnd

Preview:

Description:

OmicronDnd is a lightweight, high-performance drag and drop JavaScript library for both desktop and mobile.

With this library, users can drag and drop elements immediately with the mouse or by tapping and holding when using touch devices.

It also comes with a smooth animation when moving elements.

How to use it:

1. Download and import the OmicronDnd.

import OmicronDnd from './omicron-dnd.js';

2. Initialize the OmicronDnd on the target container whose children should be draggable & sortable.

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

OmicronDnd.init(document.getElementById('list'));

3. You can also drag elements between multiple containers.

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

<ul id="list">
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  ...
</ul>

for (const ulElem of document.getElementsByTagName('ul')) {
  OmicronDnd.init(ulElem);
}

4. Available options.

OmicronDnd.init(myElem, {
  // CSS selector of draggable elements
  draggableSelector: null,
  // CSS selector of elements to be ignored
  filterSelector: null,
  // CSS selector of handle element.
  handleSelector: null,
  // scale factor for making the dragged element smaller.
  floatElScale: 1,
});

5. Event handlers.

OmicronDnd.init(myElem, {
  // Called before drag start
  onBeforeDragStart: null,
  // called when dragging
  onDragStart: null,
  // callend after entered container
  onContainerEntered: null,
  // called at the end of the drag, too, before the drag finish events.
  onContainerLeft: null,
  // called when container didn't change.
  onInternalChange: null,
  // called on fromEl when toEl !== fromEl.
  onDropToOtherContainer: null,
  // called on toEl when toEl !== fromEl.
  onDropFromOtherContainer: null,
  // called after drag end
  onDragFinished: null,
});

Changelog:

v0.2.1 (02/14/2022)

• Delay calling releasePointerCapture until starDrag + move toEl assignment
• Bugfix