JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div class="demo">
    
    <div id="draggable" class="ui-widget-content">
        <p>Drag from here</p>
        <div class="dragme group1"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif"><br>Group 1</div>
        <div class="dragme group1"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif" height="100"><br>Group 1</div>
        <div class="dragme group2"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif"><br>Group 2</div>
        <div class="dragme group2"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif" height="100"><br>Group 2</div>
        <div class="dragme group2"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif"><br>Group 2</div>
    </div>
    
    <div id="droppable">
        <p>Drop here</p>
    </div>
    
</div>

CSS

#draggable { width: 600px; height: 300px; padding: 0.5em; margin: 10px; background: #444; color:#ddd; }
#droppable { width: 600px; height: 300px; padding: 0.5em;  margin: 10px; background: #222; color:#ddd; }
.dragme { background: #555; color:#ddd; text-align: center; width: 100px; padding: 5px; float: left; }
.fade { opacity: 0.3 }
.demo { width: 620px }

JavaScript

// function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
var getAll = function(t) {
    return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
};
// add drag functionality
$(".dragme").draggable({
    revert: true,
    revertDuration: 10,
    // grouped items animate separately, so leave this number low 
    containment: '.demo',
    stop: function(e, ui) {
        getAll(ui).css({
            'top': ui.helper.css('top'),
            'left': 0
        });
    },
    drag: function(e, ui) {
        getAll(ui).css({
            'top': ui.helper.css('top'),
            'left': ui.helper.css('left')
        });
    }
});
$("#droppable").droppable({
    drop: function(e, ui) {
        ui.draggable.appendTo($(this));
        getAll(ui).appendTo($(this));
    }
});