JSFiddle - React, Tailwind, and code Playground

by Lardpower

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<svg id="main">
  
    <rect width="10" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  
</svg>

JavaScript

$('rect')
  .draggable()
  .bind('mousedown', function(event, ui){
  
  	console.log($(this).position());
    
  // bring target to front
  // $(event.target.parentElement).append( event.target );
})
  .bind('drag', function(event, ui){
  
  console.log( ui.position);
  
  
  // update coordinates manually, since top/left style props don't work on SVG
  event.target.setAttribute('x', ui.position.left);
  event.target.setAttribute('y', ui.position.top);
});