DnD.js provides the event-handling part of drag and drop, not the actual implementation of copying and moving.
<script src="./node_modules/dndesm/dnd.js"></script>
<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);
}
});
});
});
<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>
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.
});
// 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');
})
// 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".
});
get drag target element.
DnD.uniqueEL(e, ns).then(el => {})
move: Shift + Drop
copy: Ctrl + Drop
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>