JSFiddle - React, Tailwind, and code Playground

by teleclimber

HTML

<div contentEditable="true">This section defines an event-based drag-and-drop mechanism.

This specification does not define exactly what a drag-and-drop operation actually is.

On a visual medium with a pointing device, a drag operation could be the default action of a mousedown event that is followed by a series of mousemove events, and the drop could be triggered by the mouse being released.

When using an input modality other than a pointing device, users would probably have to explicitly indicate their intention to perform a drag-and-drop operation, stating what they wish to drag and where they wish to drop it, respectively.

    However it is implemented, drag-and-drop operations must have a starting point (e.g. where the mouse was clicked, or the start of the selection or element that was selected for the drag), may have any number of intermediate steps (elements that the mouse moves over during a drag, or elements that the user picks as possible drop points as he cycles through possibilities), and must either have an end point (the element above which the mouse button was released, or the element that was finally selected), or be canceled. The end point must be the last element selected as a possible drop point before the drop occurs (so if the operation is not canceled, there must be at least one element in the middle step).</div>

JavaScript

document.addEventListener( 'dragstart', function(event) {
    event.dataTransfer.effectAllowed = "copyMove";
});
document.addEventListener( 'dragover', function(event) {
    event.preventDefault();
    console.log( 'dragover '+event.dataTransfer.effectAllowed+' '+event.dataTransfer.dropEffect );
});
document.addEventListener( 'dragenter', function(event) {
    event.preventDefault();
    console.log( 'dragenter '+event.dataTransfer.effectAllowed+' '+event.dataTransfer.dropEffect );
});
document.addEventListener( 'drop', function(event) {
    event.preventDefault();
    console.log( 'drop '+event.dataTransfer.effectAllowed+' '+event.dataTransfer.dropEffect );
});