JSFiddle - React, Tailwind, and code Playground

by Iván Pereira

HTML

<div id="container">
  <div class="drag">
    <p>Exemple bloc 1</p>
  </div>
  <div class="drag">
    <p>Exemple bloc 2</p>
  </div>
</div>

<div id="drop">
  <p>Drop here</p>
</div>

CSS

#container{
  width: 100%;
}
.drag {
  height: 50px;
  width: 50px;
  background: #505050;
  color: #FFFFFF;
  padding: 10px;
  display: inline-block;
  margin: 0 10px 10px 10px;
}

#drop {
  width: 100%;
  height: 600px;
  background: #FFFFFF;
  border: 1px solid #999999;
}

JavaScript

makeDragable($(".drag"));

$("#drop").droppable({
  accept: ".drag",
  drop: function(event, ui) {
  
  	if( $(ui.draggable).hasClass("cloned") ) {
    
    	$(ui.draggable).css(ui.offset).css("position", "absolute");      
      return;
    
    }
    
    var item = $(ui.draggable).clone();
    item.addClass("cloned");
    $(this).append(item);
    makeDragable(item);
  }
});

$("#container").droppable({
  accept: ".cloned",
  drop: function(event, ui) {
    $(ui.draggable).detach();
  }
});

function makeDragable(item) {
  item.draggable({
    opacity: 0.7,
    cursor: "move",
    helper: "clone"
  });
}