javascript - 动态创建的元素不可拖动
问题描述
我有一个简单的块,它的元素被动态添加到 DOM,我希望用户能够创建一个块,并且它应该可以使用 jsplumb 库进行拖动。
不幸的是,现在我可以创建元素但它们不可拖动,但如果我手动将它们添加到 dom,它是可拖动的。
这是我到目前为止所拥有的
function addMovieButton() {
var newMovieBlockButton = $("<div class='movie-button w'>Button New<div class='ep' action='begin'></div><div>");
}
这是plumb.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");
var windows_movie = jsPlumb.getSelector(".statemachine-demo .movie-block ");
// 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);
};
// suspend drawing and initialise.
instance.batch(function () {
for (var i = 0; i < windows.length; i++) {
initNode(windows[i], true);
console.log(windows[i]);
}
for (var j = 0; j < windows_movie.length; j++) {
initNode(windows_movie[j], true);
console.log(windows_movie[j]);
}
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
这是现场演示现场演示
这是 plunker完整的源代码
在上面的演示中,只需右键单击添加电影块进行测试
为什么可拖动对动态创建的元素不起作用?
解决方案
这是我不久前第一次发现“jsplumb”时制作的示例页面,它完全符合您的要求,因此您可能想要使用它或在它之上构建。
请记住,确实应该draggable
在将元素添加到 DOM 之后调用该方法,我的示例非常简单:
- 它不需要
jsplumb.fire
- 它不需要
.ready
绑定 - 它不需要 jsplumb 提供的“批处理”
所以你可以避免像准备好的范围和其他我仍在努力掌握的问题。
推荐阅读
- asp.net-core - .NET Core 3.1 - Angular 9 - ERR_TOO_MANY_REDIRECTS
- api - Bitbucket API - REST - 如何按名称搜索存储库
- vue.js - 查找 tsconfig.json 或 jsconfig.json 时出现 Vetur 错误
- docker - 在分离模式下使用 .sh 脚本查看 docker 容器中的日志
- tensorflow - 历史词典的准确性与屏幕上打印的不同
- node.js - Strapi with MongoDB (macOS):使用命令“npx create-strapi-app my-project”创建项目时出错?
- autodesk-forge - React 中的 Autodesk Forge 查看器 v7
- xaml - 在其他页面顶部显示布局并使其永远不会关闭,即使内容页面发生更改
- php - 在 Elasticsearch 中排除大量项目的更好方法
- django - django 中的 post_save 信号