JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="bloc" id="div_1" data_id="1"></div>
		<div class="bloc" id="div_2" data-id="2"></div>
	
		<div id="wrap" style="width:1000px;margin:auto"> 
			<div id="left">
				
			</div>
		
			<div id="right" >
				<table width="100%" style="text-align:center;height:100%">
                <tbody>
                    <tr style="height:133px">
                        <td>
                            <div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1">
                                <img src="_pictures/1.png" alt="héhé" />
                            </div>
                        </td>
                        <td>
                            <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2">
                                <img src="_pictures/2.png" alt="héhé" />
                            </div>
                        </td>
                        <td>
                            <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3">
                                <img src="_pictures/3.png" alt="héhé" />
                            </div>
                        </td>
                    </tr>

                    <tr style="height:133px">
                        <td>
                            <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4">
                                <img src="_pictures/4.png" alt="héhé" />
                            </div>
                        </td>
                        <td>
                            <div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5">
                                <img src="_pictures/5.png" alt="héhé" />
                            </div>
                        </td>
                        <td>
                  ...

CSS

#div_1{height:200px;width:400px;border:5px dotted red;}
			#div_2{height:200px;width:400px;background-color:yellow;}
			#left{
				width:400px;
				min-height:400px;
				max-height:;
				float:left;
				border:1px solid black;
				margin:0;padding:0;
			}
			#right{
				width:420px;
				float:right;
				border: 1px solid red;
				margin:0;
				padding:0;
			}

JavaScript

$(function(){
				$(function(){
					$("#left").sortable({
						revert: true
					});
				});
				$(function(){
					$(".my_div").draggable({
						connectToSortable: "#left",
						helper: "clone",
						stop: function(e, ui){
							$("#left").clone().append($(".bloc[data-id="+$(this).attr("data-id")+"]"));
						}
					});
				});
				$("div").disableSelection();
			});