JSPlumb Draggable Groups - Defect

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 class="demo statemachine-demo" id="statemachine-demo">
        <div class="group" id="group1">
            <div class="background"></div>
            <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>
        <div class="group" id="group2">
            <div class="background"></div>
            <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>
    <!-- /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;
    z-index: 5;
    pointer-events: none;
        padding: 10px;
}
.background {
    position: absolute;
    padding: 10px;
    background-color: blue;
    opacity: 0.4;
    z-index: 3;
    border-radius: 4px;
    pointer-events:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#group2 .background {
    background-color: red;
}
.ep {
    pointer-events: auto;
}
#group3 .background {
    background-color: green;
}
}

JavaScript

jsPlumb.ready(function (instance) {  
    jsPlumb.setContainer('statemachine-demo');


    jsPlumb.connect({
        source: "opened",
        target: "phone1"
    });

    jsPlumb.connect({
        source: "opened",
        target: "inperson"
    });


    jsPlumb.draggable($(".w"), {
        drag: function (event) {
            //updateGroupPositions();
         }
    });

    $('.group').draggable({
        start: function (event, ui) {
            var $group = $(event.target);
            $group.appendTo("#statemachine-demo");
        },
        drag: function (event, ui) {
            jsPlumb.repaintEverything();
        },
        stop: function (event, ui) {
        }
    });
});