JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<span class='draggable' id='draggable1'>dddddddddddddddddddddddd</span>


<div class='droppable' id='droppable2'></div><div class='droppable' id='droppable1'></div>

CSS

.draggable {
    width: 100px; 
    height: 30px;
    border: 1px solid blue;    
}
div#droppable1 {
    margin-top: 50px;
    float: left;
    width: 200px;   
    height: 100px;
    background:red;
    margin-left:-402px;
}

div#droppable2 {
   margin-top: 50px;
   float: left;
   width: 400px;
   height: 100px;
   background:black;
}
div#droppable1 div.draggable {
   float: left;
   background: yellow;  
   border: none;
}
div#droppable2 div.draggable {
   float: right;
   background: white;
   border: none;   
}

JavaScript

$(function () {
    $(".draggable").draggable({
      helper: "clone",
      cursor: "move",
      containment: 'body'
    });
    
    
    $("div.droppable").droppable({
      addClasses: false,
      drop: function (event, ui) {
        var $draggable = $(ui.draggable),
            $droppable = $(this);
          
        $droppable.data({'drop': true, 'draggable': $draggable});
      }
    });
    
    $('div.droppable').hover(function() {
        if ($(this).data('drop') === true) {
            $(this).html($($(this).data('draggable')).clone());
            $('div.droppable').data({'drop': false, 'draggable': false});
        }        
    });
});