applicationDesigner

Application Designer

by sporritt

HTML

<script src="http://jsplumb.org/js/1.3.3/jquery.jsPlumb-1.3.3-all-min.js"></script>
<html>
    <body onunload="jsPlumb.unload();">
        <ul>
            <li class="dragMe"><div id="VL0071P1" class="operation">VL0071P1</div></li>
            <li class="dragMe"><div id="VL0071P2" class="operation">VL0071P1</div></li>
            <li class="dragMe"><div id="VL0071P3" class="operation">VL0071P1</div></li>
            <li class="dragMe"><div id="VL0071P5" class="operation">VL0071P1</div></li>
            <li class="dragMe"><div id="VL0071P6" class="operation">VL0071P1</div></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            <li class="dragMe"></li>
            
        </ul>
    </body>
</html>

CSS

ul {
margin:20px;
}

ul li {
position:relative;
    width:100px;
    height:50px;
margin-bottom:10px;
 border:1px solid orange; 
float:left;  
margin:10px;    
}

div.operation {
    border:1px solid black;
    width:100px;
    height:50px;
    text-align:center;
    position:absolute;
z-index:5;
}
._jsPlumb_endpoint {
    z-index:6;
}

JavaScript

$(function() {
    //$( ".operation" ).draggable({ grid: [ 20,20 ] });

    
    
    //this code lets the nested DIV's settle into their new cozy list item home :-)
    $(".dragMe").droppable({
        activeClass: "active",
        hoverClass: "hover",
        accept: function (draggable) {
            var droppable = $(this);
            var draggablesDropable = draggable.parent();
            if (droppable.parent().is(draggablesDropable.parent())) {
                return true;
            }
            else if (droppable.parent().find(".operation").size() < droppable.parent().find(".dragMe").size()) {
                return true;
            }
            return false;
        },

        drop: function(event, ui) {
            var droppable = $(this);
            var draggable = ui.draggable;
            var draggablesDropable = draggable.parent();
            if (droppable.is(draggablesDropable)) {
                return false;
            }
            else if (!droppable.find(".operation").size()) {
                droppable.append(draggable);
           }
            else if (droppable.parent().is(draggablesDropable.parent())) {
            }
            else if (droppable.parent().find(".operation").size() < droppable.parent().find(".dragMe").size()) {
                var draggablesDropableClone = draggablesDropable.clone().insertBefore(draggablesDropable);
                if (droppable.parent().find(".dragMe").index(emptyDroppable) > droppable.parent().find(".dragMe").index(droppable)) {
                    draggablesDropable.insertBefore(droppable);
                }
                else {
                    draggablesDropable.insertAfter(droppable);
                }
                draggable.css({"top": 0, "left": 0});
                draggablesDropableClone.before(emptyDroppable).remove();
            }
        }
    });
    
    
    
    
    
    
    window.jsPlumbDemo = {
        init : function() {
           ...