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 (ideally, the parent element creates a new stacking context, and all children have z-index 0 or unset)
• you probably want to set "cursor: grab" on your draggable elements; we set "cursor: grabbing" WHILE dragging (note: of your draggable elements are also clickable, you might want to skip this)

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

Threshold movement / clickable children

We've implemented a minimum threshold movement before drag processes commence. If the user moves less than that amount between mousedown and mouseup, then no drag process is ever started and click events should fire on the children (so you can have children that are both sortable and clickable).

Once the threshold movement has been reached, a drag process is initiated, and click events should not be dispatched on the dragged child.

Our minimum threshold movement MAY change between different versions. We might provide an option to configure this threshold, but I don't want to do that without a decent reason.

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??? modern browsers might synthesize mousedown/mousemove/mouseup events)

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.