JSFiddle - React, Tailwind, and code Playground
HTML
<div class="draggable followers"><div class="draggable main">Main</div>Follower</div>
<div class="draggable followers">Follower2</div>
CSS
.draggable{
border: 1px solid red;
width: 60px;
height: 60px;
margin-left: 0;
margin-top: 0;
}
.main{
width: 300px
}
.ui-draggable-dragging {
border-color: blue;
}
JavaScript
$(function() {
$('.draggable.followers').draggable();
$('.draggable.main').draggable();
/* dragstart */
$('.draggable.main').on('dragstart', function() {
$('.draggable.followers').each(function() {
$(this).trigger('dragstart');
});
});
/* drag */
$('.draggable.main').on('drag', function() {
var maintop = $(this).css('top');
var mainleft = $(this).css('left');
$('.draggable.followers').each(function() {
//$(this).trigger('drag');
//$(this).addClass('ui-draggable-dragging');
$(this).css('margin-left', mainleft);
});
//$('.draggable.followers:first').css('margin-top', maintop);
});
$('.draggable.main').on('dragstop', function() {
var maintop = $(this).css('top');
var mainleft = $(this).css('left');
$('.draggable.followers').each(function() {
$(this).trigger('dragstop');
$(this).removeClass('ui-draggable-dragging');
$(this).css('margin-left', mainleft);
});
$('.draggable.followers:first').css('margin-top', maintop);
});
/* test different actions on .followers */
$('.draggable.followers').on('dragstart', function() {
// do something
});
$('.draggable.followers').on('drag', function() {
// do something
});
$('.draggable.followers').on('dragstop', function() {
// do something
});
});