我正在尝试使用表单上的按钮事件向jsPlumb canvas添加节点。这是我从原始文件的源代码修改的代码 -
var _addEndpoints;
var idCount=5;
function addNode(){
idCount = idCount+1;
console.log($('#selector').find(":selected").text());
console.log("flowchartWindow"+idCount);
var new_item = '<div class="window jtk-node jsplumb-endpoint-anchor jsplumb-draggable jsplumb-connected" '
+'id="flowchartWindow'+idCount+'">'+
'<strong>'+$('#selector').find(":selected").text()+'</strong><br><br>'
+'</div>'
$("#canvas").append(new_item);
_addEndpoints("Window"+idCount);
// instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [20, 20] });
}
jsPlumb.ready(function () {
instance = window.jsp = jsPlumb.getInstance({
// default drag options
DragOptions: { cursor: 'pointer', zIndex: 2000 },
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays: [
[ "Arrow", {
location: 1,
visible:true,
id:"ARROW",
events:{
click:function() { alert("you clicked on the arrow overlay")}
}
} ],
[ "Label", {
location: 0.1,
id: "label",
cssClass: "aLabel",
events:{
tap:function() { alert("You 'tap'ed an a label"); }
}
}]
],
Container: "canvas"
});
var basicType = {
connector: "StateMachine",
paintStyle: { strokeStyle: "red", lineWidth: 4 },
hoverPaintStyle: { strokeStyle: "blue" },
overlays: [
"Arrow"
]
};
instance.registerConnectionType("basic", basicType);
// this is the paint style for the connecting lines..
var connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth: 6,
strokeStyle: "#216477",
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: "yellow",
strokeStyle: "black"
},
// the definition of source endpoints (the small blue ones)
sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
strokeStyle: "#7AB02C",
fillStyle: "transparent",
radius: 7,
lineWidth: 3
},
isSource: true,
connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
overlays: [
[ "Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible:false
} ]
]
},
// the definition of target endpoints (will appear when the user drags a connection)
targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#7AB02C", radius: 11 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
]
},
init = function (connection) {
connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
};
var sourceAnchors = ["BottomCenter","LeftMiddle", "RightMiddle"];
var targetAnchors = ["TopCenter"];
_addEndpoints = function (toId) {
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
instance.addEndpoint("flowchart" + toId, sourceEndpoint, {
anchor: sourceAnchors[i], uuid: sourceUUID
});
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
instance.addEndpoint("flowchart" + toId, targetEndpoint, {
anchor: targetAnchors[j], uuid: targetUUID });
}
};
// suspend drawing and initialise.
instance.batch(function () {
_addEndpoints("Window4");
_addEndpoints("Window3");
_addEndpoints("Window2");
_addEndpoints("Window1");
// listen for new connections; initialise them the same way we initialise the connections at startup.
instance.bind("connection", function (connInfo, originalEvent) {
init(connInfo.connection);
});
// make all the window divs draggable
instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [20, 20] });
// THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector
// method, or document.querySelectorAll:
//jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });
// connect a few up
instance.connect({uuids: ["Window2BottomCenter", "Window3TopCenter"], editable: true});
instance.connect({uuids: ["Window2LeftMiddle", "Window4TopCenter"], editable: true});
instance.connect({uuids: ["Window4LeftMiddle", "Window4TopCenter"], editable: true});
instance.connect({uuids: ["Window3RightMiddle", "Window2TopCenter"], editable: true});
instance.connect({uuids: ["Window4BottomCenter", "Window1TopCenter"], editable: true});
instance.connect({uuids: ["Window3BottomCenter", "Window1TopCenter"], editable: true});
//
//
// listen for clicks on connections, and offer to delete connections on click.
//
instance.bind("click", function (conn, originalEvent) {
// if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// instance.detach(conn);
conn.toggleType("basic");
});
instance.bind("dblclick", function (conn, originalEvent) {
// if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// instance.detach(conn);
instance.detach(conn);
});
// instance.bind("endpointClick", function (endpoint, originalEvent) {
// // if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// // instance.detach(conn);
// alert("Shit");
// });
instance.bind("connectionDrag", function (connection) {
console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
});
instance.bind("connectionDragStop", function (connection) {
console.log("connection " + connection.id + " was dragged");
});
instance.bind("connectionMoved", function (params) {
console.log("connection " + params.connection.id + " was moved");
});
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
原始演示在这里：https://jsplumbtoolkit.com/community/demo/flowchart/index.html 我编辑的相关js文件是this。
添加节点并添加endPoint元素，但它不可拖动。
答案 0 :(得分：0)
我通过使instance成为一个全局变量并将其称为可拖动而不是jsPlumb类来实现它。
以下是修改：
var _addEndpoints;
var instance;
var idCount=5;
function addNode(){
idCount = idCount+1;
console.log($('#selector').find(":selected").text());
console.log("flowchartWindow"+idCount);
var new_item = '<div class="window jtk-node jsplumb-endpoint-anchor jsplumb-draggable jsplumb-connected" '
+'id="flowchartWindow'+idCount+'">'+
'<strong>'+$('#selector').find(":selected").text()+'</strong><br><br>'
+'</div>'
$("#canvas").append(new_item);
_addEndpoints("Window"+idCount);
instance.draggable(document.querySelectorAll(".flowchart-demo .window"), { grid: [20, 20] })
}
jsPlumb.ready(function () {
instance = window.jsp = jsPlumb.getInstance({
// default drag options
DragOptions: { cursor: 'pointer', zIndex: 2000 },
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays: [
[ "Arrow", {
location: 1,
visible:true,
id:"ARROW",
events:{
click:function() { alert("you clicked on the arrow overlay")}
}
} ],
[ "Label", {
location: 0.1,
id: "label",
cssClass: "aLabel",
events:{
tap:function() { alert("You 'tap'ed an a label"); }
}
}]
],
Container: "canvas"
});
var basicType = {
connector: "StateMachine",
paintStyle: { strokeStyle: "red", lineWidth: 4 },
hoverPaintStyle: { strokeStyle: "blue" },
overlays: [
"Arrow"
]
};
instance.registerConnectionType("basic", basicType);
// this is the paint style for the connecting lines..
var connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth: 6,
strokeStyle: "#216477",
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: "yellow",
strokeStyle: "black"
},
// the definition of source endpoints (the small blue ones)
sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
strokeStyle: "#7AB02C",
fillStyle: "transparent",
radius: 7,
lineWidth: 3
},
isSource: true,
connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
overlays: [
[ "Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible:false
} ]
]
},
// the definition of target endpoints (will appear when the user drags a connection)
targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#7AB02C", radius: 11 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
]
},
init = function (connection) {
connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
};
var sourceAnchors = ["BottomCenter","LeftMiddle", "RightMiddle"];
var targetAnchors = ["TopCenter"];
_addEndpoints = function (toId) {
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
instance.addEndpoint("flowchart" + toId, sourceEndpoint, {
anchor: sourceAnchors[i], uuid: sourceUUID
});
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
instance.addEndpoint("flowchart" + toId, targetEndpoint, {
anchor: targetAnchors[j], uuid: targetUUID });
}
};
// suspend drawing and initialise.
instance.batch(function () {
_addEndpoints("Window4");
_addEndpoints("Window3");
_addEndpoints("Window2");
_addEndpoints("Window1");
// listen for new connections; initialise them the same way we initialise the connections at startup.
instance.bind("connection", function (connInfo, originalEvent) {
init(connInfo.connection);
});
// make all the window divs draggable
instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [20, 20] });
// THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector
// method, or document.querySelectorAll:
//jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });
// connect a few up
instance.connect({uuids: ["Window2BottomCenter", "Window3TopCenter"], editable: true});
instance.connect({uuids: ["Window2LeftMiddle", "Window4TopCenter"], editable: true});
instance.connect({uuids: ["Window4LeftMiddle", "Window4TopCenter"], editable: true});
instance.connect({uuids: ["Window3RightMiddle", "Window2TopCenter"], editable: true});
instance.connect({uuids: ["Window4BottomCenter", "Window1TopCenter"], editable: true});
instance.connect({uuids: ["Window3BottomCenter", "Window1TopCenter"], editable: true});
//
//
// listen for clicks on connections, and offer to delete connections on click.
//
instance.bind("click", function (conn, originalEvent) {
// if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// instance.detach(conn);
conn.toggleType("basic");
});
instance.bind("dblclick", function (conn, originalEvent) {
// if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// instance.detach(conn);
instance.detach(conn);
});
// instance.bind("endpointClick", function (endpoint, originalEvent) {
// // if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// // instance.detach(conn);
// alert("Shit");
// });
instance.bind("connectionDrag", function (connection) {
console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
});
instance.bind("connectionDragStop", function (connection) {
console.log("connection " + connection.id + " was dragged");
});
instance.bind("connectionMoved", function (params) {
console.log("connection " + params.connection.id + " was moved");
});
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});