Nested dragging

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.12-all.js"></script>
<div id="simQCanvas" class="canvas">
  <div id="item_1" class="item Machine">
    <h5>Fatyak</h5>
    <div id="item_3" class="item DatabaseServer">
        <h5>Fatyak\BusSystems</h5>
        <div id="item_5" class="item Database">
            <h5>Novedad</h5>
        </div>
        <div id="item_7" class="item Database">
            <h5>Ingenio</h5>
        </div>
    </div>    
    <div id="item_2" class="item Machine">
        <h5>Crown</h5>
        <div id="item_4" class="item WebApplication">
            <h5>Novedad</h5>
        </div>
        <div id="item_6" class="item WebApplication">
            <h5>Ingenio</h5>
        </div>
    </div>
  </div>
</div>

CSS

.Machine {
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-color: white;
    color: black;
    font-family: helvetica;
    padding: 0.5em;
    margin: 0.5em;
    border: 2px solid #346789;
    /*width: 7em;
    height: 3em;*/
    z-index: 20;
    position: absolute;
    font-size: 0.8em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

.DatabaseServer, .WebApplication, .Application {
    border: 2px dashed #346789;
    float: left;
    padding: inherit;
    margin: inherit;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

.Database {
    border: 2px dotted #346789;
    float: left;
    padding: inherit;
    margin: inherit;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

#item_1.Machine {
    top: 1em;
    left: 1em;
}

#item_2.Machine {
    top: 5em;
    left: 47em;
}

#item_3.Machine {
    top: 10em;
    left: 2em;
}

#item_4.Machine {
    top: 3em;
    left: 26em;
}

#item_5.Machine {
    top: 10em;
    left: 32em;
}

.canvas {
    width: 80%;
    height: 20em;
    margin-left: 3em;
    margin-top: 3em;
    position: relative;
}

    .canvas h5 {
        margin-top: 0.5em;
    }

JavaScript

jsPlumb.ready(function() {
    
    jsPlumb.importDefaults({
        Container : $("#simQCanvas"),
        Anchor:"Continuous",
        Endpoint:"Blank"
    });
    
    var stateMachineConnector = {
        connector: "StateMachine",
        paintStyle: {
            lineWidth: 3,
            strokeStyle: "#056"
        },
        hoverPaintStyle: {
            strokeStyle: "#dbe300"
        },
        endpoint: "Blank",
        anchor: "Continuous",
        overlays: [["PlainArrow",
        {
            location: 1,
            width: 20,
            length: 12}]]
    };
    var e1 = jsPlumb.addEndpoint("item_4"),
        e2 = jsPlumb.addEndpoint("item_5");
        
    jsPlumb.connect({
        source: e1,
        target: e2
    }, stateMachineConnector);
    jsPlumb.draggable($(".Machine"));
});