@dom-native/dnd v0.1.0-SNAPSHOT-1

@dom-native/dnd is a minimalist API for expressive in-page drag and drop base on PointerEvent.

Why: Native HTML5 drag and drop API is great for in/out of browser drag and drop, but can be sub-optimal for in polished page drag and drop.

DEMO

Concepts

• Based on modern PointerEvent (See PointerEvent DOC on MDN)
• Follow the standard drag and drop event names 'DRAGSTART' | 'DRAG' | 'DRAGEND' ... but all uppercase to avoid native name conflict and does not attempt to mimic the native HTML5 APIs beyond the event naming.
• Fully delegatable, meaning the API does not need to bind each individual draggable element, but bind to the container with a selector for the elements (e.g., draggable(rootEl, '.drag-me'))
• No dataTransfer but a evt.detail with .source, .ghost, .droppable, .over, .pointerEvent, .data (.data not implemented yet)
• Common ghost (clone) creation and behavior with simple but expressive customization (ghost = clone/handle/image element)
• Can be activated to bind the first pointerdown with draggable(rootEl, selector, controller?) or post pointerdown with activateDrag(source, pointerEvent, controller?)

Quick Intro

<div class="root-el">     
  <h4>Drag this and drop anywhere</h4>      
  <div class="box drag-me">Drag Me</div>
  <h4>Clone will show here</h4>
  <div class="zone show-zone"></div>
</div>

// Makes all '.drag-me' element from rootEl draggable and droppable anywhere in the rootEl
// Note: O(1) binding - The selector '.drag-me' is 'live', meaning that the drag will get activated 
//                      when a roolEl's matching '.drag-me' element will be recieve pointerdown
draggable(rootEl, '.drag-me');

rootEl.addEventListener('DROP', (evt: any) => {
	const clone = evt.detail.source.cloneNode(true);

	// No matter where it is dropped, add it to the show-zone for this example
	first(rootEl, '.show-zone')!.append(clone);
});

See more on DEMO