JSFiddle - React, Tailwind, and code Playground

HTML

<div class='drag a' id='a'>A</div>
<div class='drag b' id='b'>B</div>
<div class='drag c' id='c'>C</div>
<div class='drag d' id='d'>D</div>

CSS

.drag {
    position: absolute;
    float: left;
    width: 100px;
    height: 100px;
    background: grey;
    margin: 5px;
    z-index: 100
}

.b {top: 120px}
.c {left: 120px}
.d {top: 120px;left:120px}

.selected {background-color: #4af;}

JavaScript

var selectedObjs;
var draggableOptions = {
    start: function(event, ui) {
        //get all selected...
        if (ui.helper.hasClass('selected')) selectedObjs = $('div.selected');
        else {
            selectedObjs = $(ui.helper);
            $('div.selected').removeClass('selected')
        }
    },
    drag: function(event, ui) {
        var currentLoc = $(this).position();
        var prevLoc = $(this).data('prevLoc');
        if (!prevLoc) {
            prevLoc = ui.originalPosition;
        }

        var offsetLeft = currentLoc.left-prevLoc.left;
        var offsetTop = currentLoc.top-prevLoc.top;

        moveSelected(offsetLeft, offsetTop);
        selectedObjs.each(function () {
               $(this).removeData('prevLoc');
            });
        $(this).data('prevLoc', currentLoc);
    }
};

$('.drag').draggable(draggableOptions).click(function(){$(this).toggleClass('selected')});


function moveSelected(ol, ot){
    console.log("moving to: " + ol + ":" + ot);
    selectedObjs.each(function(){
        $this =$(this);
        var p = $this.position();
        var l = p.left;
        var t = p.top;
        console.log({id: $this.attr('id'), l: l, t: t});


        $this.css('left', l+ol);
        $this.css('top', t+ot);
    })
}