JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left;">
  <div class="content">сюда перетаскивать контент</div>
  <div class="content">или сюда перетаскивать контент</div>
  <div class="content">или сюда перетаскивать контент</div>
</div>

<div style="float:right;">
  <div class="box">Перетащить box1 t1</div>
  <div class="box">Перетащить box1 t2</div>
  <div class="box">Перетащить box1 t3</div>
  <div class="box">Перетащить box1 t4</div>
</div>

CSS

.content { border:1px solid #CCC; width:200px; height:100px; padding:5px; margin:10px 0px;}
.box { width:200px; height:50px; margin:10px 0px; border:1px solid #CCC;}
.content .box{
  position:static;
}

JavaScript

$(function(){
		$(".box").draggable();
		$(".content").droppable({
        accept: '.box',
        drop: function(event, ui) {
	    		$(".box",this).remove();
					$(this).append(ui.draggable);
					$(ui.draggable).removeAttr( 'style' );
	    		}
			});	
    });