JSFiddle - React, Tailwind, and code Playground

HTML

<div class="soclass" style="width:40px;height:40px;background:black;"></div>

<div class="main" style="width:200px;height:200px;background:red">

</div>

JavaScript

$(".soclass").draggable({

          cursor: "move",
          helper: 'clone',
          revert: "invalid",
          tolerance: "fit",
          start: function(event, ui){

             $(this).draggable("option", "cursorAt", {
            left: Math.floor(ui.helper.width() / 2),
            top: Math.floor(ui.helper.height() / 2)
          }); 


          }

      });
      
      $(".main").droppable();