C&C Docs
Log in

cnc-dragdrop

A wrapper that makes the markup inside it draggable. It owns no layout of its own: you write the containers and the items, name them with two selectors, and the widget turns every match into a drop target and every match inside into something you can pick up.

Quick start

Two selectors is the whole configuration. drag-targets names the containers items can be dropped into; drag-items names the things that can be picked up. Both are matched only inside this element, so several independent drag areas can share a page.

Item 1
Item 2
Item 3 
<cnc-dragdrop drag-targets=".zone" drag-items=".item">
  <div class="zone">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
  <div class="zone">
    <div class="item">Item 3</div>
  </div>
</cnc-dragdrop>

How the selectors match

Three rules decide what is draggable and where it may go. They matter most once containers nest, where a loose reading would let an item be dropped inside itself.

Rule What it means
A container counts if it is inside this widget and matches drag-targets itself — not merely descends from a match.
An item can be picked up if it is inside this widget and matches drag-items itself. With drag-handle set, the press must also land inside a matching grip.
A drop is accepted unless the target is the item itself, or is inside it — which is what stops a branch being dragged into its own subtree.

What it loads, and when

The drag engine is Dragula, imported from a CDN on mount rather than bundled — so this widget needs network access at runtime and does nothing server-side. Everything inside it is ordinary markup that renders and reads normally without scripting; only the dragging is lost. That makes it safe for progressive enhancement, but not for an offline or locked-down deployment, and worth knowing before it goes on a critical path.

Usage guidance

Dragging is a shortcut, never the only route: it is hard with a trackpad, harder on touch, and unavailable by keyboard here, so anything reorderable this way needs another way too — move-up and move-down controls, or a field holding the position. Use drag-handle whenever an item contains text or controls, since without one the whole item swallows the press. And treat dropped as notification that the DOM already moved: persist from it, but read the new order out of the DOM rather than trying to predict it.

← Back to Widgets