jsPlumb dragging boxes off the screen prevention

Question

Currently the boxes I create in jsPlumb can be dragged off the screen, how do I prevent the boxes not be able to be dragged to the most left side of my screen? Like shown in this picture:

My page also has a menu on top, how do I apply the same tactics to prevent from my boxes being able to go over the menu bar?

Answer 1

By making use of option containment you can restrict the boxes to be draggable inside a particular DIV:

$('#BoxId').draggable({
    containment: "#containerId",
    drag:function(e){
        jsPlumb.repaint($(this));
    }
});

for jsPlumb draggable:

jsPlumb.draggable($("BoxId"), {
    containment:"containerId" // no need of '#'
});