@qnc/drag_sorter v0.0.2

Important points

• you can only reorder children of a single element, and ALL children or sortable
• works with horizontal or vertical 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

API

See dist/npm/drag_sorter.d.ts (typescript definition file)

TODO/Ideas

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

Usage

We recommend copying entire dist/ folder to your project (so you can switch between minified/non-minified versions as desired), add via tag, then use window.DragSorter.enable(element, {options}) and window.DragSorter.disable(element)

Alternatively:

• npm install --save-dev @qnc/drag_sorter"
• import {enable, disable} from "@qnc/drag_sorter"
• use something like rollup 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.