JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.0.5/svg.js"></script>
    
<div class='content'>
    <div class='draggable first'>
        <div class='handle'></div>
        <div class='body'></div>
    </div>
    <div class='draggable second'>
        <div class='handle'></div>
        <div class='body'></div>
    </div>
</div>

CSS

.draggable {
    width: 20px;
    height: 20px;
    background-color: yellow;
    border: 1px solid gray;
}

.draggable .body {
    height: 15px;
}

.content {
    width: 100%;
    height: 200px;
}

.handle {
    height: 5px;
    background-color: gray;
}

#drawing {
    position: absolute;
    z-index: 2;
}

#drawing svg {
    position: absolute;
    z-index: 2;
    background-color: red;
    opacity: 0.5;
}

JavaScript

$( ".draggable" ).draggable({
  containment: ".content",
  handle: ".handle",
  drag: function(event, ui) {
      var $this = $(this);
      
      if(svg) {
          	 var svgLeft = svg.style("left");
             var svgTop = svg.style("top");
             
             var width = e.clientX - parseInt(svgLeft, 10) - 10;
             var height = e.clientY - parseInt(svgTop, 10) - 10;
          
          svg.size(width-20, height-10);
          line.plot(0, 0, width-20, height-10);
      }
  }
});

var flag = 0;
var line;
var svg;
var pathSetup = false;
var element = $( ".draggable" );
element.on("mousedown", "div.body", function(e){
    flag = 0;
    if(!svg) {
    	$('.content').prepend("<div id='drawing'></div>");
        svg = SVG('drawing');
        
        svg.style({
        	top: e.clientY - 10,
            left: e.clientX - 10
        });  
        
        line = svg.line(0, 0, 0, 0).stroke({ width: 1 });
    }
    // init path
});
element.on("mousemove", "div.body", function(e){
    flag = 1;
    // drag path;
});
element.on("mouseup",  "div.body", function(e){
    if(flag === 0){
        console.log("click");
        // kill path
        svg.remove();
        $('#drawing').remove();
        pathSetup = false;
        svg = undefined;
    }
    else if(flag === 1){
        console.log("drag");
        console.log($(e.delegateTarget).first().hasClass("draggable"));
       	if($(e.delegateTarget).first().hasClass("draggable")) {
           flag = 0;
           pathSetup = true;
        } else {
            svg.remove();
            $('#drawing').remove();
        	svg = undefined;
        }
        // link them
    }
});

$('.content').on("mousemove",  function(e) {
	 if(flag && !pathSetup){
         if(svg) {
             var svgLeft = svg.style("left");
             var svgTop = svg.style("top");
             
             var width = e.clientX - parseInt(svgLeft, 10) - 10;
             var height = e.clientY - parseInt(svgTop, 10) - 10;
         ...