Можно ли перетаскивать контейнер? jsplumb

Question

Я хотел бы узнать, можно ли его перетащить в контейнер jsPlumb. Если вы нажмете и перетащите контейнер (не на элемент), он перемещается, когда устройство может сфокусироваться на разных частях или элементах этого контейнера.
E.g. блок-схему, такую ​​как пример на их веб-странице; http://www.jsplumb.org/demo/flowchart/jquery.html и я хочу, чтобы весь контейнер перемещался, если я нажимаю и перетаскиваю так, чтобы все элементы перемещались также.

Спасибо.

Answer 1

Вы можете играть с этим example. Сначала нажмите кнопку «Создать контейнер», затем «Новая ячейка внутри контейнера». Вы можете перетащить контейнер, а также ячейки внутри него.

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); 
} 

}); 

Answer 2

Да, вы можете сделать это езильно с помощью библиотеки jQuery под названием - «jQuery UI».

Проверьте следующую ссылку:

https://jqueryui.com/draggable/

Вы будете в состоянии сделать это eazily, в течение 5 минут.