Is it possible to make container draggable? jsplumb

Question

I would like to know if its possible to make a jsPlumb container draggable. If you click and drag on the container(not on an element) it moves as a unit being able to focus on different parts or elements of this container.
E.g. a flow-chart like the example in their web page; http://www.jsplumb.org/demo/flowchart/jquery.html and i want the whole container to move if i click and drag so that all elements inside move as well.

Thanks.

Answer 1

You can play with this example. First push the New container button, then the New cell inside container. You can drag the container as well as the cells inside it.

JavaScript:

var instanceRegistry = [];
var containerRegistry = [];
var cellRegistry = [];

$(function() {

var endpointOptions = {
   isSource: true,
    isTarget: true
};

$('#newContainerButton').click(newContainer);
$('#newCellButton').click(newCell);

function newContainer() {
var containerIndex = "container" + (containerRegistry.length + 1);
$('#containerTemplate').clone().appendTo('#mainContainer')
    .show()
    .attr('id', containerIndex)
    .draggable({
    containment: 'mainContainer',
    cursor: 'move'
    })
    .find('.newCellButton').click(newCell).end();

containerRegistry.push(containerIndex);
var containerInstance = jsPlumb.getInstance({
    Container: containerIndex,
    Endpoint: [                     // The default Endpoint definition.
        'Dot',                      // Endpoint type
        {                           // Endpoint type options
            radius: 6,              // Defines the radius of the dot
            cssClass: 'cell-endpoint' // A CSS class to attach to the element the Endpoint creates
            }
    ],
    PaintStyle: {                   // The default appearance of a Connector
        strokeStyle: '#2e6f9a',     // color for a Connector
        lineWidth: 2                // width of a Connector's line
    }
});
instanceRegistry.push(containerInstance);
}




function newCell(event) {
var $container = $(event.target).parent();
var cellIndex = "cell" + (cellRegistry.length + 1);
$('#cellTemplate').clone().appendTo($container)
    .show()
    .attr('id', cellIndex);
cellRegistry.push(cellIndex);

var num = containerRegistry.indexOf($container.attr('id'));
var instance = instanceRegistry[num];

instance.draggable(cellIndex, {
    containment: $container,
    cursor: 'move'
});

instance.addEndpoint(cellIndex, {anchor: "Top"}, endpointOptions);
instance.addEndpoint(cellIndex, {anchor: "Right"}, endpointOptions);
instance.addEndpoint(cellIndex, {anchor: "Bottom"}, endpointOptions);
instance.addEndpoint(cellIndex, {anchor: "Left"}, endpointOptions);
}

});