JSPlumb Draggable Groups

by sberube

HTML

<link rel="stylesheet" href="https://jsplumbtoolkit.com/demo/statemachine/demo.css">
<link rel="stylesheet" href="https://jsplumbtoolkit.com/css/jsplumb.css">
<script src="https://jsplumbtoolkit.com/js/jquery.jsPlumb-1.7.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="main">
    <!-- demo -->
    <div style="height: 20px">
        <button id="moveNode1">Move PHONE1 to GREEN</button>
        <button id="moveNode2">Move PHONE1 to BLUE</button>
    </div>
    <div class="demo statemachine-demo" id="statemachine-demo">
        <div class="group" id="group1">
            <div class="w" id="opened">BEGIN
                <div class="ep"></div>
            </div>
            <div class="w" id="phone1">PHONE INTERVIEW 1
                <div class="ep"></div>
            </div>
            <div class="w" id="phone2">PHONE INTERVIEW 2
                <div class="ep"></div>
            </div>
            <div class="w" id="phone3">PHONE INTERVIEW 3
                <div class="ep"></div>
            </div>
            <div class="w" id="phone4">PHONE INTERVIEW 4
                <div class="ep"></div>
            </div>
        </div>
        <div class="group" id="group2">
            <div class="w" id="inperson">IN PERSON
                <div class="ep"></div>
            </div>
            <div class="w" id="rejected">REJECTED
                <div class="ep"></div>
            </div>
        </div>
        <div class="group" id="group3">
            <div class="w" id="inperson1">IN PERSON
                <div class="ep"></div>
            </div>
            <div class="w" id="rejected1">REJECTED
                <div class="ep"></div>
            </div>
        </div>
        <div class="w" id="outer">OUTER
            <div class="ep"></div>
        </div>
    </div>
    <!-- /demo -->
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
#main {
    width: 100%;
    height:100%;
    margin:0px;
}
.demo {
    margin:0px;
    position: relative;
    height: 500px;
}
.w {
    position: absolute;
    pointer-events: auto;
}
.group {
    position: absolute;
    background-color: blue;
    opacity: 0.4;
    z-index: 3;
    border-radius: 4px;
    pointer-events:auto;
    padding: 10px;
    width: 0px;
    height: 0px;
}
#group2 {
    background-color: red;
}
.ep {
    pointer-events: auto;
}
#group3 {
    background-color: green;
}
}

JavaScript

jsPlumb.ready(function (instance) {

    var updateGroupPositions = function (animate) {

        $(".group").each(function (index) {
            var top, left, width, height;

            var $group = $(this);
            $nodes = $group.find('.w');
            $nodes.each(function (index) {
                var $node = $(this);
                var position = $node.position();
                top = (top === undefined ? position.top : Math.min(top, position.top));
                left = (left === undefined ? position.left : Math.min(left, position.left));
                width = (width === undefined ? (position.left + $node.outerWidth()) : Math.max(width, position.left + $node.outerWidth()));
                height = (height === undefined ? (position.top + $node.outerHeight()) : Math.max(height, position.top + $node.outerHeight()));
                //console.log($node.attr('id') + " height total: " + height + " position-top: " + position.top + " outer: " + $node.outerHeight());
            });

            height = height - top;
            width = width - left;

            var paddingTop = $group.css('padding-top');
            var paddingBottom = $group.css('padding-bottom');
            var paddingLeft = $group.css('padding-left');
            var paddingRight = $group.css('padding-right');
            if (animate) {
                $group.animate({
                    "top": top - parseInt(paddingTop, 10),
                        "left": left - parseInt(paddingLeft, 10),
                        "width": width + parseInt(paddingRight, 10),
                        "height": height + parseInt(paddingBottom, 10)
                }, 250);
            } else {
                $group.css({
                    "top": top - parseInt(paddingTop, 10),
                        "left": left - parseInt(paddingLeft, 10),
                        "width": width + parseInt(paddingRight, 10),
                        "height": height + parseInt(paddingBottom, 10)
               ...