JSFiddle - React, Tailwind, and code Playground

by Narayan Prusty

HTML

<img src="http://qnimate.com/wp-content/uploads/2014/06/drag-and-drop-api.jpg" draggable="true" ondragstart="dragging_started();" ondrag="dragging();" ondragend="dragging_ended();"  ondragenter="entered_target_zone();" ondragover="mouse_moving_in_targetzone();" ondragleave="left_target_zone();" ondrop="element_dropped();" />
<img src="http://qnimate.com/wp-content/uploads/2014/07/css3-columns.jpg" draggable="true" ondragstart="dragging_started();" ondrag="dragging()" ondragend="dragging_ended();" ondragenter="entered_target_zone();" ondragover="mouse_moving_in_targetzone();" ondragleave="left_target_zone();" ondrop="element_dropped();" />

CSS

img
{
    height: 100px;
    width: 100px;
}

JavaScript

function dragging_started(event)
{
    event.dataTransfer.effectAllowed = "move";
    event.dataTransfer.dropEffect = "move";
    console.log("Dragging Started");
}

function dragging()
{
    console.log("Dragging");
}

function dragging_ended()
{
    console.log("Dragging Ended");
}

function entered_target_zone(e)
{
    event.preventDefault();//default browser action is not to make any element a dropable zone. We are preventing the default action for this element to make it a droppable zone.
    console.log("Dragged element enters droping zone");
}

function mouse_moving_in_targetzone(e)
{
    event.preventDefault();//default browser action is not to make any element a dropable zone. We are preventing the default action for this element to make it a droppable zone.
    console.log("Mouse moving in target zone");
}

function left_target_zone()
{
    console.log("Dragged element left droping zone");
}

function element_dropped(e)
{
    console.log("Element dropped on the target zone");
    e.stopPropagation();//browsers usually redirect after drop event. I don't know why? Its beffer to stop it by stopping bubbling of the event to the browser window.
}