JSFiddle - React, Tailwind, and code Playground

by Lardpower

HTML

<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){
  // bring target to front
  // $(event.target.parentElement).append( event.target );
})
  .bind('drag', function(event, ui){
  // 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);
});