JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div id="mainDrag"> rarabr lablrba lbrl </div>
<br/>
<div class="child"></div>
<br/>
<div class="child"></div>
<br/>
<div class="child"></div>

<div id="infos"></div>
<div id="info2"></div>

CSS

.child {
    background-color:#AAD;
    border: 1px solid #33F;
}
#mainDrag {
    background-color:#DAA;
    border: 1px solid #F33;
}
div {
    width:70px;
    height:70px;
}

JavaScript

$(".child").draggable({
    cancel:".child"
});

$("#mainDrag").draggable({

     drag: function(event, ui) {
          $(".child").each(function() {
               $(this).css({
                    'top': ui.helper.css('top'),
                    'left': ui.helper.css('left')
                }); 
          });
         $("#infos").text(ui.position.top+"/"+ui.position.left);
     }
});