JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<div class="anotherDiv"></div>
<div class="group">
<div class="clusters-group-container popup-panel-bg">
<div class="group-container">BLOCK</div>
</div>
</div>
<div class="group">
<div class="clusters-group-container popup-panel-bg">
<div class="group-container">BLOCK 2</div>
</div>
</div>
<div class="group">
<div class="clusters-group-container popup-panel-bg">
<div class="group-container">BLOCK 3</div>
</div>
</div>
<div class="group">
<div class="clusters-group-container popup-panel-bg">
<div class="group-container">BLOCK 4</div>
</div>
</div>
CSS
.group{
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: rgba(255,0,0,0.5);
}
.anotherDiv{
width: 500px;
min-height: 300px;
margin: 10px;
padding: 10px;
position: relative;
background-color: rgba(0,154,0,0.7);
}
.hiddenGroup
{
opacity: 0;
}
.droppedGroup
{
position: absolute;
}
JavaScript
$(function() {
$(".group").map(initDraggable);
$(".anotherDiv").droppable({
accept: '.group',
drop: function(event, ui) {
var $cloned = $(ui.helper).clone().addClass('droppedGroup');
$(this).append($cloned);
initDraggable.apply($cloned);
$(ui.draggable).remove();
}
});
function initDraggable(){
var $el = $(this);
$el.draggable({
containment: 'document',
zIndex: 9999,
helper: 'clone',
appendTo: '.anotherDiv',
start: function(event, ui){
$el.addClass('hiddenGroup');
},
revert: function(isValidDrop){
if(!isValidDrop){
$el.removeClass('hiddenGroup');
}
return false;//!isValidDrop;
}
});
}
});