是否可以使容器可拖动? jsplumb
Is it possible to make container draggable? jsplumb
我想知道是否可以使 jsPlumb 容器可拖动。
如果您单击并拖动容器(而不是元素),它会作为一个单元移动,从而能够专注于此容器的不同部分或元素。
例如。像他们网页中的示例一样的流程图;
http://www.jsplumb.org/demo/flowchart/jquery.html
如果我单击并拖动,我希望整个容器移动,以便内部的所有元素也移动。
谢谢。
是的,您可以使用名为 - "jQuery UI" 的 jQuery 库轻松完成此操作。
检查以下内容link:
https://jqueryui.com/draggable/
您将能够在 5 分钟内轻松完成。
你可以玩这个example。首先按下 New container 按钮,然后按下 New cell inside container。您可以拖动容器以及其中的单元格。
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);
}
});
我想知道是否可以使 jsPlumb 容器可拖动。
如果您单击并拖动容器(而不是元素),它会作为一个单元移动,从而能够专注于此容器的不同部分或元素。
例如。像他们网页中的示例一样的流程图;
http://www.jsplumb.org/demo/flowchart/jquery.html
如果我单击并拖动,我希望整个容器移动,以便内部的所有元素也移动。
谢谢。
是的,您可以使用名为 - "jQuery UI" 的 jQuery 库轻松完成此操作。
检查以下内容link:
https://jqueryui.com/draggable/
您将能够在 5 分钟内轻松完成。
你可以玩这个example。首先按下 New container 按钮,然后按下 New cell inside container。您可以拖动容器以及其中的单元格。
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);
}
});