我有一个简单的部分或块，其中使用jquery动态创建元素，
我希望用户能够根据需要连接该元素。
这就是我拥有的
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<script src="lib/plumb.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="main-container tk-demo-canvas statemachine-demo
jtk-surface" id="canvas">
<div id="context-menu-canvas">
<ul class="menu-options">
<li id="btn-add-movie-block" class="menu-option">Add movie block
</li>
</ul>
</div>
<div id="context-menu-movie-block">
<ul class="menu-options">
<li id="btn-add-movie-button" class="menu-option">Add Button</li>
</ul>
</div>
</div>
<textarea id="jsontextarea"></textarea>
<script src="https://jsplumbtoolkit.com/community/demo/statemachine/lib/jsplumb.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</body>
</html>
这是使用jquery动态创建的元素
//function for adding movie block , a blcok which will contain a movie
function addMovieBlock2(id, left, top) {
var newMovieBlock = $('<div class="movie-block">Block</div>');
newMovieBlock.attr("movieid", id);
newMovieBlock.attr("id", "movieblock" + id);
newMovieBlock.css("left", left + "px");
newMovieBlock.css("top", top + "px");
$(".main-container").append(newMovieBlock);
newMovieBlock.draggable({
drag: function (event, ui) {
updateJsonMovieBlockPosition($(event.target).attr("movieid"), ui.position.left, ui.position.top);
}
});
//function to add button to json
jsonUpdate();
}
function addMovieButton2(movieid, id, left, top){
var newMovieBlockButton = $("<div class='movie-button w'>Button<div class='ep' action='begin'></div><div>");
newMovieBlockButton.attr("buttonid", id);
newMovieBlockButton.attr("id", "moviebutton" + id);
newMovieBlockButton.css("left", rightClickPosition.left.left + "px");
newMovieBlockButton.css("top", rightClickPosition.left.top + "px");
$("#movieblock" + movieid).append(newMovieBlockButton );
newMovieBlockButton .draggable({
containment: "parent",
drag: function (event, ui) {
updateJsonMovieBlockPosition($(event.target).attr("buttonid"), ui.position.left, ui.position.top);
}
});
}
这是jsplumb.js
jsPlumb.ready(function () {
// setup some defaults for jsPlumb.
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", {radius: 5}],
Connector:"StateMachine",
HoverPaintStyle: {stroke: "#1e8151", strokeWidth: 2 },
ConnectionOverlays: [
[ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
} ],
[ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
],
Container: "canvas"
});
instance.registerConnectionType("basic", { anchor:"Continuous", connector:"StateMachine" });
window.jsp = instance;
var canvas = document.getElementById("canvas");
var windows = jsPlumb.getSelector(".statemachine-demo .w");
// bind a click listener to each connection; the connection is deleted. you could of course
// just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
// happening.
instance.bind("click", function (c) {
instance.deleteConnection(c);
});
// bind a connection listener. note that the parameter passed to this function contains more than
// just the new connection - see the documentation for a full list of what is included in 'info'.
// this listener sets the connection's internal
// id as the label overlay's text.
instance.bind("connection", function (info) {
info.connection.getOverlay("label").setLabel(info.connection.id);
});
// bind a double click listener to "canvas"; add new node when this occurs.
jsPlumb.on(canvas, "dblclick", function(e) {
// newNode(e.offsetX, e.offsetY);
});
//
// initialise element as connection targets and source.
//
var initNode = function(el) {
// initialise draggable elements.
instance.draggable(el);
instance.makeSource(el, {
filter: ".ep",
anchor: "Continuous",
connectorStyle: { stroke: "#5c96bc", strokeWidth: 2, outlineStroke: "transparent", outlineWidth: 4 },
connectionType:"basic",
extract:{
"action":"the-action"
},
maxConnections: 6,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});
instance.makeTarget(el, {
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: true
});
// this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
// version of this demo to find out about new nodes being added.
//
instance.fire("jsPlumbDemoNodeAdded", el);
};
var newNode = function(x, y) {
var d = document.createElement("div");
var id = jsPlumbUtil.uuid();
d.className = "w";
d.id = id;
d.innerHTML = id.substring(0, 7) + "<div class=\"ep\"></div>";
d.style.left = x + "px";
d.style.top = y + "px";
instance.getContainer().appendChild(d);
initNode(d);
return d;
};
// suspend drawing and initialise.
instance.batch(function () {
for (var i = 0; i < windows.length; i++) {
initNode(windows[i], true);
}
// and finally, make a few connections
// instance.connect({ source: "opened", target: "phone1", type:"basic" });
// instance.connect({ source: "phone1", target: "phone1", type:"basic" });
// instance.connect({ source: "phone1", target: "inperson", type:"basic" });
// instance.connect({
// source:"phone2",
// target:"rejected",
// type:"basic"
// });
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
plunker demo完整代码可在此处找到
不幸的是，当我将其拖动时，连接器所连接的元素仍位于同一位置
我的代码在做什么错了？