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;
    background-color: rgba(0,154,0,0.7);
}

.hiddenGroup 
{
    opacity: 0;
}

JavaScript

$(function() {      
    $(".group").map(initDraggable);
    $(".anotherDiv").droppable({
        accept:  '.group',
        drop:  function(event, ui) {
            $(this).append($(ui.draggable).clone().removeClass('hiddenGroup'));
            $(ui.draggable).remove();
        }
    });    
    
    function initDraggable(){        
        //var $backup = $(this).clone();
        //var $parent = $(this).parent();   
        var $el = $(this);
        
        $el.draggable({
                containment: 'document',
                zIndex: 9999,
                helper: 'clone',
                appendTo: '.anotherDiv',
                revert: function(isValidDrop){
                    if(!isValidDrop){                                   
                        //$parent.append($backup);                        
                        //initDraggable.apply($backup);
                        $el.removeClass('hiddenGroup');                        
                    }
                    return false;//!isValidDrop;
                }
        }).on("drag",function(e){
            $el.addClass('hiddenGroup');
        });
    }
});