JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Draggable using SVG path as a handle</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
    <p>In jQuery Draggable plugin the handle have to be a child of draggable element. But if you want to use some other element as a handle, you have to use some workaround. One workaround is to trigger drag-event of draggable element when pressing mouse on handle.<br><br>
    Drag orange shape. The blue stroked div drags, although orange shape is not a child of div.
    </p>
    <svg width="1000" height="1000" style="position:absolute;">
     <circle id="circle_1" cx="230" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   <path transform="translate(0,0)" id="path_1" style="cursor: move; opacity: 1; pointer-events: fill;" fill="#ff9000" stroke="none" d="M0,0L200,0L180,200L40,200L0,0Z"></path>
        </svg>
    <div id="div_1" style="left:0px;top:0px;"></div>
</body>
</html>

CSS

#div_1
{
    width:199px;
    height:199px;
    position:absolute;
border:1px solid blue;
    pointer-events:none;
}
p {
position:absolute;
top:240px;
}

JavaScript

$("#path_1").mousedown(function(e) {
   $( "#div_1" ).trigger(e);
});

$( "#div_1" ).draggable({
start: function(e, ui){},
drag: function(e, ui)
{
   var x=$( "#div_1" )[0].style.left;
   var y=$( "#div_1" )[0].style.top;
   x = parseInt(x);
   y = parseInt(y);
   $( "#path_1" ).attr("transform", "translate("+x+","+y+")");
},
stop: function(e,ui)
{
   var x=$( "#div_1" )[0].style.left;
   var y=$( "#div_1" )[0].style.top;
   x = parseInt(x);
   y = parseInt(y);
   $( "#path_1" ).attr("transform", "translate("+x+","+y+")");
}

});