Group Test

by sberube

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="container">
    <div class="group" id="group1">
        <label>Group 1</label>
    </div>
    <div class="group" id="group2">
        <label>Group 2</label>
    </div>
    <div class="node" id="node1"></div>
    <div class="node" id="node2"></div>
    <div class="node" id="node3"></div>
    <div class="node" id="node4"></div>
    <div class="node" id="node5"></div>
    <div class="node" id="node6"></div>
    <div class="node" id="node7"></div>
    <div class="node" id="node8"></div>
</div>

CSS

.node {
    width: 60px;
    height: 60px;
    border: 1px solid black;
    border-radius: 30px;
    position:absolute;
}
#container {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid gray;
}
.group {
    border: 1px solid blue;
    position: absolute;
    background-color: lightblue;
    opacity: 0.8;
    border-radius: 4px;
    width: auto;
    height: auto;
}
.group label {
    width: 100%;
    color:white;
    font-weight: bold;
}
#group2 {
    border: 1px solid red;
    background-color: red;
    opacity: 0.5;
}
#node1 {
    background-color: orange;
}

JavaScript

var self = this;
var group1 = ['node1', 'node2', 'node3', 'node4'];
var group2 = ['node5', 'node6', 'node7', 'node8'];
var groups = [group1, group2];
var nodeMoved = function () {
    var padding = 30;
    var top, left, width, height, node, $node, position;


    for (var j = 0; j < groups.length; j++) {
        top = left = width = height = node = $node = position = undefined;
        var group = groups[j];


        for (i = 0; i < group.length; i++) {
            node = group[i];
            $node = $('#' + node);
            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.width()) : Math.max(width, position.left + $node.width()));
            height = (height === undefined ? (position.top + $node.height()) : Math.max(height, position.top + $node.height()));
        }

        top = top - padding;
        left = left - padding;
        height = height - top + padding;
        width = width - left + padding;

        console.log(top + " " + left + " " + width + " " + height);
        $("#group" + (j + 1)).css({
            "top": top,
                "left": left,
                "width": width,
                "height": height
        });

    }
};

var groupMoved = function (event) {
    var groupId = $(event.currentTarget).attr('id');

    if (groupId === "group1") {

    } else if (groupId === "group2") {

    }
}



$(document).ready(function () {
    $('.node').draggable({
        drag: function (event) {
            nodeMoved();
        }
    });
    $('.group').draggable({
        drag: function (event) {
            groupMoved(event);
        }
    });
    nodeMoved();
});