JSFiddle - React, Tailwind, and code Playground

by Jason Normandin

HTML

<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
   onload='Init(evt)'
   onmousedown='Grab(evt)'
   onmousemove='Drag(evt)'
   onmouseup='Drop(evt)'>

   <title>Drag And Drop</title>

   <desc>
      A nice little demo of drag-and-drop functionality in SVG,
      written by Doug Schepers on February 16, 2004.
      Use or misuse this code however you wish.
   </desc>

   <script><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;

      var TrueCoords = null;
      var GrabPoint = null;
      var BackDrop = null;
      var DragTarget = null;

      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;

         // these svg points hold x and y values...
         //    very handy, but they do not display on the screen (just so you know)
         TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();

         // this will serve as the canvas over which items are dragged.
         //    having the drag events occur on the mousemove over a backdrop
         //    (instead of the dragged element) prevents the dragged element
         //    from being inadvertantly dropped when the mouse is moved rapidly
         BackDrop = SVGDocument.getElementById('BackDrop');
      }

      function Grab(evt)
      {
         // find out which element we moused down on
         var targetElement = evt.target;

         // you cannot drag the background itself, so ignore any attempts to mouse down on it
         if ( BackDrop != targetElement )
         {
            //set the item moused down on as the element to be dragged
            DragTarget = targetElement;

            // move this element to the "top" of the display, so it is (almost)
            //    always over other elements (exception: in this case, elements that are
            //    "in the folder" (children of the folder group) with only maintain
            //    hierarchy within...