v146 · Drag and Drop · JavaScript · demo
Kanban Board
A three-column Kanban board where each column has a different dropEffect: "To Do" uses move, "In Progress" uses copy, and "Archive" uses link. Chrome 146 ensures event.dataTransfer.dropEffect in the drop handler matches what was set in dragover — so the board can take the right action without guessing.
Chrome 146+ —
dropEffect is now preserved from dragover to drop. In older Chrome, drop always reported 'none' regardless of what dragover set. The event log shows what each browser actually delivers.
Drag cards between columns · each column sets a different dropEffect in dragover · the log shows whether the drop event receives the correct value
DnD event log — dropEffect values
———Drag a card to start
// dropEffect preserved from dragover to drop — Chrome 146
dropZone.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move'; // set the desired effect
});
dropZone.addEventListener('drop', e => {
e.preventDefault();
// Chrome 146+: dropEffect === 'move' (matches what dragover set)
// Before Chrome 146: dropEffect === 'none' regardless of dragover value
if (e.dataTransfer.dropEffect === 'move') {
moveItem(e.dataTransfer.getData('text/plain'));
} else if (e.dataTransfer.dropEffect === 'copy') {
copyItem(e.dataTransfer.getData('text/plain'));
}
});