问题标签 [jsplumb]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2206 浏览

javascript - 使用开/关按钮使启用 JSPlumb 的 div 可拖动

http://jsfiddle.net/taoist/fsmX7/

在上面的代码示例中,我希望 .textDivContainer 的默认状态不可拖动。然后,当用户单击绿色按钮时,我希望编辑器关闭(它确实如此)并且我希望 .textDivContainer可以拖动。然后,一旦用户再次单击该按钮,编辑器将打开,并且 div 将不可拖动,因此创建了一个切换开关。就目前而言,这是行不通的。

但是,我确实使用默认的 JQuery 可拖动方法使其在没有JsPlumb 的情况下工作。这可以在下面看到。

下面的 Non-JSPlumb JSfiddle 中的 Draggable 方法通过使用名为“enable”和“disable”的 2 个不同的属性值来完成此操作。这些似乎不适用于 JSPlumb 我试图将这两个属性与 JSplumb 一起使用,但无济于事。它们可能会起作用,但如果是这样,我不知道如何实现它们。

http://jsfiddle.net/KrdEU/5/

下面是迄今为止的最终 JSFiddle,它是一个半工作的 JSplumb 版本。这使用类交换来实现可拖动功能。它默认为不可拖动,当单击绿色按钮时,它变为可拖动的。但是,当第二次单击绿色按钮时,它不会停止可拖动。

http://jsfiddle.net/taoist/fsmX7/1/

0 投票
1 回答
137 浏览

javascript - 单击按钮时如何调用额外的单击和拖动

click 或 mouseup 事件是否可以启动一个函数,其中在 div 的另一部分或另一个 div 上调用额外的单击和拖动事件?

简而言之,当我单击某物时,我希望 mouseup 事件创建用户快​​速选择另一个 div(或同一 div 的一部分)并拖动它的等效项。我不是在寻找 CSS 动画本身。我知道这听起来很奇怪,但请阅读以下内容,了解我认为我需要这个

我试图用这个解决的问题

我试图解决的问题如下。我正在制作这个工具: https ://dl.dropboxusercontent.com/u/57427474/JsPlumb_troubleshooting/trace3.html

当用户输入键盘时,单击绿色按钮并移动编辑器一切正常。但是,如果他们再次单击绿色按钮并向记事本添加其他内容(然后关闭编辑器),JSplumb 线节点就会变得异常并且不会像下图那样更新。

https://dl.dropboxusercontent.com/u/57427474/JsPlumb_troubleshooting/img.png

但是,当我拖动 div 时,节点会回到原位。

我在想是否可以添加一个 eventListener,当用户单击绿色按钮时,它会稍微拖动 div(使用鼠标事件),我可以巧妙地解决这个问题。

0 投票
1 回答
2209 浏览

jquery - 以编程方式“拾取” jsPlumb jQuery 中元素之间的连接

当使用 jsPlumb 连接元素时,我觉得缺少一个相当重要的功能和用例:

例如在 mousedown 上,从其中一个端点释放连接器并使其被拖动并能够重新应用到端点或目标的能力。在使用流程图连接器或连接器共享端点的一般情况下,用户如何决定移动哪个连接器?您总是拿起最上面的一个,或按顺序指定的一个。

我的意思是在动态图表用户界面中的用例,最终用户将在元素之间从端点拖放到端点的连接。如果多个连接器共享一个端点,则用户无法选择移动哪个连接器。

为了解决这个问题,我希望可以通过端点以外的任何东西拖动连接器,从而使其从目标端点释放并被用户拖动。

示例: http: //jsplumbtoolkit.com/jquery/flowchartConnectorsDemo.html
尝试将几个“拖动”端点拖到“拖放”端点。如果您现在单击并拖动“drop”端点,您将拾取一个预定的连接器(可能不是您想要的)。是否可以改为通过拖动连接器的中间(黄线上的任何位置)来拾取它?

问题:
当实际上用户单击并拖动连接器时,您如何“欺骗” jsPlumb 有人单击并拖动端点?

注意:我不想删除连接。我知道如何编程。我想触发一个连接器被它的端点拾取和拖动,而不是直接单击端点。

0 投票
1 回答
2376 浏览

jquery - jsplumb 动画连接线

我使用 jsplumb 创建了一个非常简单的设置,它显示一个顶部元素,然后将该元素连接到屏幕上的其他六个元素。

我想知道是否可以对连接线进行动画处理,使它们看起来从顶部元素开始生长,而不仅仅是出现。

这是我为创建简单布局而复制的代码。

我使用的CSS如下:

我的 html 正文部分的内容如下所示

我希望连接器从 starterPoint “增长”到下面的每个窗口元素。

我对使用 jsplumb 很陌生,我似乎找不到很多关于它的信息

谢谢

0 投票
1 回答
727 浏览

javascript - JSPlumb 连接表行

我有 2 个表 5 行数据,我想将 table_1 的每一行连接到 table_2。我可以连接这 2 个表,但无法将 table_1 的每一行连接到 table_2。

如下所示的代码:

在上面的例子中,我想连接 Name--->Name2 、 Age-->Age2 和 DOB-->DOB2。在 jsPlumb 中是否有可能,或者是否有任何 jquery/javascript 插件来执行此操作?

提前致谢

0 投票
1 回答
566 浏览

javascript - JSPlumb:根据内容调整 HTML5 画布的大小

所以,为了解释我的场景:我想创建一个在线“有限状态机”-webapp,它能够可视化自动机概念(确定性、非确定性),然后执行一些逻辑,如最小化等来帮助学生以实验的方式理解这些抽象概念。

因此,就我的观点而言,我认为 JSPlumb 是可行的方法(其他建议表示赞赏)-但我找不到在 JSPlumb 中“调整”HTML5 Canvas 的选项。假设有 100 个节点的自动机,640x480 的画布不是很好,所以它应该是什么,从 640x480 的画布开始,在画布的一侧单击并拖动,用户可以将其扩展到它的需要. 当然,之前绘制的元素应该保留它们的位置。

所以,我的问题是:是否可以使用 jsplumb 执行此操作,还是我需要自己编写代码?如果我需要自己编写代码,任何关于从哪里开始更改 jsplumb 文件的提示都将受到高度赞赏。

0 投票
2 回答
1021 浏览

javascript - javascript函数指针和“this”

使用 jsPlumb 进行绑定,我将一个方法作为变量传递,用作回调。当它被调用时,“this”不是该方法所属的对象。如何访问该方法的对象实例,以便可以访问它的变量和其他成员函数?

我无法控制回调调用方法,它是一个单独的库。我所做的就是从我的对象 init 方法中调用绑定。我本来希望this在我的_connection方法中成为它的对象。

0 投票
3 回答
9087 浏览

angularjs - 使用 AngularJS 和 jsPlumb(在 AngularJS 控制器中使用 jsPlumb 函数)

所以我有一个正在处理的项目,它要求我使用 jsPlumb 进行图形元素连接,并且我正在完全使用 AngularJS 构建我的应用程序。

如果我想将另一个库的代码包含到我的控制器中(以启动一些 jsPlumb 代码,比如在 ng-click 上)或我的 AngularJS 代码的任何其他部分,要遵循什么程序?我应该这样做还是为什么不这样做?

0 投票
1 回答
3721 浏览

angularjs - 未捕获的类型错误:无法读取未定义的属性“parentNode” - AngularJS 和 jsPlumb 连接

所以我试图用一条曲线连接两个由用户使用 angularjs 创建的元素,我收到了这个错误:

未捕获的类型错误:无法读取未定义的属性“parentNode” - AngularJS 和 jsPlumb 连接

我的服务中的一个功能

所以基本上我将我的 sourceObject 与其新创建的子对象连接起来,这发生在我的一项服务中。我认为元素的动态创建发生了一些事情,但我并不完全确定。

0 投票
1 回答
795 浏览

jsplumb - 拖动停止后获取目标的位置

停止拖动时如何获取连接目标的位置。我试过这个,但我认为那个元素已经被删除了: