JSFiddle - React, Tailwind, and code Playground

by dfaunce

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="space">
  <div id="objects">
    
    <div class="box box-selectable">
      <div class="title">
        Item 1
      </div>    
    </div>
    
    <div class="box box-selectable">
      <div class="title">
        Item 2
      </div>    
    </div>       
    
  </div>


  <div id="container">
  
  </div>


  

</div>

CSS

#space {
  width:100%;
  height:calc(100vh - 100px);
  display:flex;
}

#container {
  width:100%;
  position:relative;
  background:#fff;
  min-height:500px;
}

#objects {
  width:150px;
  border-left:2px solid #ccc;
  text-align:center;
  background:#f1f1f1;
  position:relative;
  top:0;
  right:0;
  z-index:2;
}


.box {
  position:relative;
  color:#886841;
  background:#fffdea;
  width:80px;
  height:80px;
  border:1px solid #e2bf7e;
  box-shadow:2px 4px 4px #808080;
  margin:20px auto;
}

.box.draggable {
    position:absolute !important;
    cursor:move;
}

.box .title {
  text-align:center;
  position:absolute;
  font-weight:bold;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

JavaScript

$(function() {
	var $container = $("#container"),
  		$objects = $("#objects");
  
  $(".box-selectable").on("click", function() {
  	var $g = $(this).clone(true, true);
    $g
    	.removeClass("box-selectable")
    	.addClass("draggable resizable")
      .appendTo($container)
      .resizable()
      .draggable();
      
    //$g.resizable().draggable();

    $(this).remove();    
  });
  
  
});