Important points

• you can only reorder children of a single element
• works on all current AND future children of the parent (ie. you can add children after making the parent sortable, and those children will also be draggable)
• works with horizontal, vertical, or 2-D layouts
• original element is set to "visibility: hidden" while being dragged (to leave a space)
• we clone the element, and that's what you drag around
• the clone is appended to the parent, with z-index 1; it's up to you to ensure this stacks properly on your page
• you probably want to set "cursor: grab" on your draggable elements; we set "cursor: grabbing" WHILE dragging

drag_sorter2 vs drag_sorter

drag_sorter2 is intended to replace drag_sorter, but you can have both installed. drag_sorter chose an unfortunate "swapping approach" when moving a child around in a 2-D layout. drag_sorter2 uses the conventional approach. The change in approach also necessitated a change in the callback signatures.

Elements vs nodes

You can only drag child elements, not text nodes. We recommend having no text nodes (or comments, or other non-visible nodes) between the visible element children. We make no guarantees about which "side" of a text node the dragged element will end up on, whether it can be placed on either side of a text node, etc.

The start and end indices provided to the callback functions are "node indeces" (ie. they consider all node children of the container, not just elements).

TODO/Ideas

• animate into final position on release (shouldn't bee too bad)
• animate sibling swaps (fairly difficult)
• touch screen support (might already be done???)

Usage

• npm install --save-dev @qnc/drag_sorter2
• import {enable, disable} from "@qnc/drag_sorter2
• use something like esbuild to build your app

Reminder: we've included drag_sorter.d.ts (typescript definition file), so you can import from typescript with full support, but the module is pre-built, so you don't need to use typescript compiler when building/bundling.