DnD.js

DnD.js provides the event-handling part of drag and drop, not the actual implementation of copying and moving.

quick start

load

no-module

<script src="./node_modules/dndesm/dnd.js"></script>

module

<script type="module">
	import DnD from "./node_modules/dndesm/index.mjs";
</script>

const namespace = 'dd';
const allowed = 'move';
DnD.setup(namespace).then(() => {
	DnD.Drop[namespace][allowed].set((e, ns) => {
		DnD.shiftDrop(e);
		DnD.uniqueEL(e, ns).then(el => {
			switch(e.dataTransfer.effectAllowed) {
				case 'move':
					e.target.append(el);
					break;
				case 'copy':
				default:
					const clone = el.cloneNode();
					clone.innerHTML = el.innerHTML;
					e.target.append(clone);
					DnD.reNumber(ns);
			}
		});
	});
});

set drag target & drop zone

<div class="dd-drag-move">drag able move</div>
<div class="dd-drag-copy">drag able copy</div>

<div class="dd-drop-move">drop zone allow move</div>
<div class="dd-drop-copy">drop zone allow copy</div>
<div class="dd-drop-all">drop zone allow all</div>

functions

DnD.setup(ns = 'dd')

async function. set event-handling

DnD.setup();

// OR

const namespaces = ['dd', 'xx', 'yy', 'zz'];
Promise.all(namespaces.map(DnD.setup)).then(() => {
	// complete all set up.
});

DnD.(Dragstart|Drag|Dragend)[namespace][effectAllowed].set(event, namespace)

// effectAllowed
// ['', 'none', 'copy', 'move', 'link', 'copyMove', 'copyLink', 'linkMove', 'all'];
DnD.Dragstart.dd.move.set((e, ns) => {
	console.log('drag target unique id', e.dataTransfer.getData(DnD.unique));
	e.dataTransfer.setData('test', 'a');
})

DnD.(Dragenter|Dragover|Dragleave|Drop)[namespace][dropEffects].set(event, namespace)

// dropEffects
// ['', 'move', 'copy', 'link', 'none']
DnD.Drop.dd.move.set((e, ns) => {
	console.log('drag target unique id', e.dataTransfer.getData(DnD.unique));
	console.log(e.dataTransfer.getData('test'));

	// Describe the implementation of "Move on Drop".
});

DnD.uniqueEL(event, namespace)

get drag target element.

DnD.uniqueEL(e, ns).then(el => {})

DnD.shiftDrop(event)

move: Shift + Drop
copy: Ctrl + Drop

DnD.reNumber(namespace)

update unique number.

<div class="dd-drag-copy" data-dd-unique="1">copy</div>
<div class="dd-drop-all">
	<!-- copy.  -->
	<div class="dd-drag-copy" data-dd-unique="1">copy</div>
</div>

DnD.Drop.dd.copy.set((e, ns) => {
	DnD.uniqueEL(e, ns).then(el => {
		const clone = el.cloneNode();
		clone.innerHTML = el.innerHTML;
		e.ctarget.append(clone);

		// unique number update
		DnD.reNumber(ns);
	});
});

<div class="dd-drag-copy" data-dd-unique="1">copy</div>
<div class="dd-drop-all">
	<!-- copy.  -->
	<div class="dd-drag-copy" data-dd-unique="2">copy</div>
</div>