JSFiddle - React, Tailwind, and code Playground

HTML

<button id="dropDrag">Toggle drop "Helper" or "Draggable"</button><br/><br/><br/>

<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>

<div class="droppable">Drop Target</div>

CSS

.product { margin: 5px; padding: 3px; display:inline-block; border: solid 1px #999;}
.helper { border: solid 1px #990000; padding: 3px;}
.droppable { border: solid 1px #009900; height: 300px;}

JavaScript

var dropHelp = true;


  $(".product").draggable({
    revert: 'invalid',
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="helper">Helper</div>');
    }
  });
  $(".droppable").droppable({
    drop: function(event, ui) {
        if(dropHelp){
           //clone and remove positioning from the helper element
           var newDiv = $(ui.helper).clone(false)
               .removeClass('ui-draggable-dragging')
               .css({position:'relative', left:0, top:0});            
           $(this).append(newDiv);
        
        //drop the draggable source element
        } else {
           $(this).append(ui.draggable);
        }
    }
  });

$('#dropDrag').click(function(){
    dropHelp = !dropHelp;
});