JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<B>
<SPAN ondragstart="fnHandleDragStart()">
  SELECT AND DRAG ME</SPAN>
</B>
<P><BR><P>
<DIV ID="oTarget" 
     STYLE="background:beige; 
            height:100;
            width:200;
            border:solid black 1px;"
     ondrop="fnHandleDrop()"
     ondragover="fnDragOnDefault()"
     ondragenter="fnDragOnDefault()">
[MOVE allowed]
</DIV>
<DIV ID="oTarget2" 
    STYLE="background:beige; 
            height:100;
            width:200;
            border:solid black 1px;"
     ondrop="fnHandleDrop()"
     ondragover="fnDragOnDefault2()"
     ondragenter="fnDragOnDefault2()">
[COPY allowed]
</DIV>

JavaScript

function fnHandleDrop()
{
  var oTarg = window.event.srcElement;
  var oData = window.event.dataTransfer;
  fnDragOnDefault();
  oTarg.innerText += oData.getData("text");
}


function fnHandleDragStart()
{                                      
   event.dataTransfer.effectAllowed = "copyMove";
}


function fnDragOnDefault()
{
  var oEvent = window.event;
  oEvent.returnValue = false;

  var oData = window.event.dataTransfer;
  oData.dropEffect = "move";

}

function fnDragOnDefault2()
{
  var oEvent = window.event;
  oEvent.returnValue = false;

  var oData = window.event.dataTransfer;
  oData.dropEffect = "copy";
}