Question

我想知道是否有可能使jsPlumb容器可拖动。如果单击并拖动容器（而不是元素），它将作为一个单元移动，以便能够专注于此容器的不同部分或元素。
例如。一个流程图，就像他们网页上的例子一样; http://www.jsplumb.org/demo/flowchart/jquery.html 我希望整个容器移动，如果我点击并拖动，以便内部的所有元素也移动。

感谢。

Answer 1

您可以使用此example。首先按下New容器按钮，然后按容器内的New cell。您可以拖动容器以及容器内的单元格。

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

是的，您可以使用名为 - ＆＃34; jQuery UI＆＃34;的jQuery库来实现这一点。

检查以下链接：

https://jqueryui.com/draggable/

你可以在5分钟内完成它。

是否可以使容器可以拖动？ jsplumb

2 个答案: