JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div class='guid-x'></div>
<div class='guid-x'></div>

<div class='guid-y'></div>
<div class='guid-y'></div>


<ol id="selectable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ol>

        <div id="holder"></div>
<div class='container'>
    
</div>

CSS

#draggable {
        background: orange;
        width: 100px;
        height: 100px;
}

.ui-resizable-se, .ui-resizable-sw, .ui-resizable-ne, .ui-resizable-nw  {
    opacity: .4;
    width: 5px;
    height: 5px;
    background-color: #333;
    border: 1px #EEE solid;
    font-size: 1px;
    
}

#holder {
  position:absolute;
top:0;
 left:0;
right:0;
 bottom:0;
    z-index:-1;
    pointer-events: none;
    
}

    .pinning #selectable li:hover { background: #FE6A40; }


    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; }
    #selectable li { position:absolute; margin: 3px; padding: 1px; /*float: left;*/ width: 100px; height: 80px; font-size: 4em; text-align: center; 


}

.ui-pin { background: green; width: 10px; height: 40px; display:block; position:absolute; }

.ui-back{ background: black; width: 20px; height: 20px; display:block; position:absolute; }


#selectable li:nth-child(1) { left: 150px; }
#selectable li:nth-child(2) { left: 300px; }
#selectable li:nth-child(3) {  left: 300px; top: 300px; }

JavaScript

$(function() {
        
        //$(document).on("mousedown", "svg", function() {
        //    return false;
        //});
        $(document).selectable({
            filter: '#selectable li',
            selected: function(e, ui) {
                
                
                $(ui.selected).resizable({'handles': 'all'});
                $("<div class='ui-pin' />").appendTo(ui.selected).position({
                    my: 'bottom',
                    at: 'top center',
                    offset: "0 -50",
                    of: ui.selected
                });
                
                $("<div class='ui-back' />").appendTo(ui.selected).position({
                    at: 'left bottom',
                    my: 'center',
                    offset: "0 50",
                    of: ui.selected
                });
                
                $(ui.selected).draggable({
                    stack: '#selectable li',
                    cancel: '.ui-pin',
                    start: function() {
                       $(".ui-selected").each(function() {
                           $(this).data("originalPosition", $(this).position());
                            });
                    },
                    drag: function(e, ui) {
                        var diffX = ui.position.left - ui.originalPosition.left;
                        var diffY = ui.position.top - ui.originalPosition.top;
                        $(".ui-selected:not(.ui-draggable-dragging)").each(function() {
                            
                            
                            var orig = $.extend({} , $(this).data("originalPosition"));
                            
                            
                            orig.left += diffX;
                            orig.top += diffY;
$(this).offset(orig);                            
                        });
                    }                        
                });
            },
            unselected: function(e,...