JSFiddle - React, Tailwind, and code Playground

by Anton Chukanov

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ready2.net/js/jquery.ui.resizable.snap.ext.js"></script>
<script src="https://ready2.net/js/multidraggable/jquery.multidraggable.js"></script>
<script src="https://ready2.net/js/smartguides/smart-guides.js"></script>
<script src="https://ready2.net/js/smartguides/jquery.draggable.smartguides.js"></script>
<script src="https://ready2.net/js/smartguides/jquery.resizable.smartguides.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://ready2.net/css/multidraggable/jquery.multidraggable.css">
<link rel="stylesheet" href="https://ready2.net/css/smartguides/smart-guides.css">
<div class="container">
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
</div>

CSS

.container {
    text-align: left;
    display: block;
    vertical-align: top;
    width: 100%;
    min-width: 400px;
    border: 1px solid #ddd;
    min-height: 180px;
    height: 500px;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.container:after {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #999;
}

.drag {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-color: #ffffc8;
    cursor: pointer;
    position: absolute;
}
        
.drag.selected {
    background-color: #b6f3b6;
}

.container:after {
    content: 'Smart guides + Multidraggable';
}

    .container .guide {
        border-color: blue;
        border-style: dotted;
    }

JavaScript

$(document).ready(function () {
    // common listeners
    $(document)
        .on('click', '.container', function (e) {
            $(this).find('.selected').removeClass('selected');
        })
        .on('click', '.drag', function (e) {
            $(this).addClass('selected');
            e.stopPropagation();
        });

    // set random position for all elements
    $('.container').each(function () {
        var container = $(this),
            drag = container.find('.drag'),
            dragSize = 50,
            height = container.height() - dragSize - 50,
            width = drag.length > 0 ? (container.width() / drag.length) : 10;        

        drag.each(function (i) {
            $(this).css({
                left: Math.random() * dragSize + i * width,
                top: Math.random() * height + 40
            });
        });
    });

    init();
});
    
function selectActive() {
    var $this = $(this);
    if (!$this.hasClass('selected')) {
        $this.siblings('.selected').removeClass('selected');
        $this.addClass('selected');
    }
}

function init() {
    var opts = {
        containment: "parent",
        snapTolerance: 10,
        smartGuides: '.container .drag:not(".selected")',
        guideClass: 'guide',
        beforeStart: selectActive
    };
    
    // with custom class
    $('.container .drag')
        .draggable($.extend(opts, {
            multiple: true,
            selected: '.container .selected'
        }))
        .resizable($.extend(opts, {
            handles: 'all'
        }));
}