无法在jsplumb中创建直连接器
在jsplumb中创建直连接器的方法如下：
- 首先，确保你已经引入了jsplumb的相关库文件，包括jsplumb.js和jsplumb.css。
- 创建一个包含可连接元素的容器。例如，可以使用一个div元素作为容器，如下所示：
<div id="container">
<!-- 这里放置可连接元素 -->
</div>- 在JavaScript代码中，初始化jsplumb并设置容器：
jsPlumb.ready(function() {
var instance = jsPlumb.getInstance({
Container: "container"
});
});- 创建可连接的元素，并设置其唯一的id属性：
<div id="element1" class="element">Element 1</div>
<div id="element2" class="element">Element 2</div>- 使用jsPlumb.connect方法创建直连接器：
var connection = jsPlumb.connect({
source: "element1",
target: "element2",
anchors: ["Right", "Left"],
paintStyle: { stroke: "#007bff", strokeWidth: 2 },
connector: ["Straight"],
endpoint: ["Dot", { radius: 4 }],
overlays: [
["Label", { label: "连接器", location: 0.5, cssClass: "connector-label" }]
]
});在这个例子中，我们使用了element1作为连接器的起点，element2作为连接器的终点，连接器的样式设置为直线（Straight），连接器的终点样式设置为圆点（Dot），并添加了一个标签。
注意：以上代码只是一个基本示例，你可以根据自己的需求进行自定义。
对于jsplumb中创建直连接器的更多详细信息和使用方法，请参考腾讯云的相关文档和官方示例：
- 官方文档：jsPlumb Documentation
- 腾讯云相关产品：腾讯云云托管、腾讯云云服务器
相关·内容
我使用jsplumb在HTML中创建了一个流程图，将连接器从一个div添加到另一个div。每次创建从一个div到另一个div的连接时，我的jquery代码都会为连接器创建一个svg。我想创建流程图的xml，这样我就可以保持流程图的流程。为此，我需要找到给定svg连接器(jsplumb连接器)的源和目标。
基本上，我希望以xml格式存储流程图，并将源和目标存储在完美
浏览 2提问于2013-05-24得票数 0
回答已采纳
我一直在自定义jsplumb流程图示例。目前，我可以在元素之间拖动和创建连接器，但现在我想将一个元素拖到屏幕的空白部分(即不是元素)并捕获该事件。有人知道是哪一个吗？
浏览 7提问于2014-06-18得票数 0
回答已采纳
我使用的是jsPlumb 5x的流程图应用程序。使用的包是@jsplumb/connector-流程图和@jsplumb/browser-ui。我决定使用流程图连接器。我找不到更改连接器布局的方法。 ? 有没有办法改变样式，使新的布局看起来像上面的样子？ 当前连接器布局： ? 目前，我在instance.connect方法as described here中定义连接器 connector: {
浏览 218提问于2021-09-08得票数 0
回答已采纳
1回答
使用jsPlumb处理项目时，我将静态连接器设置为两个地图标记。jsplumb连接器的端点出现在地图标记图像的上方，而我希望它们出现在下面。在jsplumb javascript库中，我应该从哪里编辑端点的计算位置？
浏览 2提问于2014-09-12得票数 3
我是jsPlumb的新手。我通过从数据库中读取表创建了动态div，并使用JsPlumb连接器连接了这些div。divs已设置为可拖动。当页面加载时，连接器可以正确显示，但是当我拖动或移动div时，连接器断开并移动到顶部。如果我创建了一个不是来自数据库的静态div，那么连接器工作得很好，当我拖动/移动div时，连接器也会沿着连接到源和目标div的div移动。在谷歌上进行了完整的搜索并浏览了<
浏览 2提问于2013-11-22得票数 2
在这个例子中。我连接了DOM负载的前两个div。在这一行代码中jsPlumb.connect {
source: 'A',在这个项目中，我们需要能够在两个元素之间画出连接器。为此，最初的开发人员使用了。当我手动创建连接器时，这个库运行良好，并产生了结果。但是现在我要做的是动态地创建一个连接器
浏览 4提问于2013-02-20得票数 6
回答已采纳
1回答
如何区分JSPlumb中的两个源
、、、、
我正在使用JSPlumb创建一个gui问卷创建者，其中一些回答类型是“是/否”。在调用jsPlumb.getConnections()之后，我试图找出哪个连接器来自yes源，哪个连接器来自no源。
浏览 2提问于2014-02-24得票数 0
回答已采纳
我已经使用jsplumb匹配了columns模板，其中我使用了拖放功能。一切都在web浏览器上运行得很好。但当我在平板电脑浏览器上运行同样的程序时，它就不能工作了。-- jsplumb util --> <!-- jsplumb drag-->
<
浏览 0提问于2013-02-11得票数 1
1回答
获取元素的连接信息
、、、、
我正在使用jsPlumb和Javascript来实现一个简单的元素拖放界面，其中可以相互连接。我想知道当点击每个被丢弃的元素上的“设置样”按钮时，如何获得源和目标的连接细节。内部连接器：外连接器： containmen
浏览 2提问于2016-07-11得票数 1
我们正在开发一个项目，该项目使用JSPlumb进行工作流渲染，并维护一个包含节点(id、位置、文本等)的独立数据模型。和连接，使用jsPlumb.bind与事件保持同步有没有办法手动设置连接器的ID？
谢谢
浏览 2提问于2013-09-12得票数 6
我在一个Angular项目中使用了jsplumb 2.15版本，并试图在元素之间创建直接的连接。下面的代码初始化实例 ngAfterViewInit() { Container: '.diagram} 我像这样创建连接 this.jsPlumbInstance.connect({ target,
浏览 25提问于2020-10-28得票数 0
1回答
当使用jsPlumb连接元素时，有一个非常重要的特性和用例，我觉得这是缺少的：我指的用例是在动态图表用户界面中，最终用户将从端点拖放到元素之间的端点。如果多个连接器共享一个端点，则用户无法选择移动哪
浏览 2提问于2013-06-17得票数 1
回答已采纳
我使用的是jsplumb和Primefaces。我有许多p:panel组件作为ui:repeat的一部分生成。然后我想使用jsplumb将这些面板连接在一起。Primefaces生成面板ids，然后我在脚本代码中使用它们来设置jsplumb。
jsPlumb.connect({
浏览 2提问于2013-01-29得票数 3
回答已采纳
1回答
我有一个使用JsPlumb框架的应用程序。它在桌面上工作得很好，但是当使用触摸设备时，它不能正常工作。触摸设备将绘制一个图标，但它将立即显示出来。这是在触摸设备无法分辨拖动/触摸选项之间的区别之前。
我添加了一些代码，看看
浏览 1提问于2014-05-01得票数 0
我正在做一个项目，我们在一个4×X网格中有对象。我们使用JS Plumb连接这些对象，但我们注意到当它将object 4连接到object 5时，这条线进行了ugle诊断，并在第一行之后交叉。这样，第五条线仍然会下降到一个新的线，但不会有对角线连接器。在我的函数中，我在对象的父元素上使用一个no-lines类来定义一个组，它根本得不到drawLines();函数。我相信，由于我是基于父函数绘制这些函数的，所以我无法为我的父函数的last-child停止绘制事件。(function()
浏览 0提问于2016-11-30得票数 1
回答已采纳
我有一个数组，其中两个SVG元素的id存储在索引0和1中。我正在使用jsplumb在两个元素之间建立一个连接器，我使用的代码如下所示： source: divs[0], })上面的代码不起作用，并给出了以下错误：
jsPlumb.js:6203错误:属性d:期望编号“M00C-10150 NaN”
浏览 2提问于2016-06-07得票数 0
1回答
JSplumb双键
、、、
我想用librairy jsPlumb Javascript制作两个div的双键。我可以建立联系，但不是双键。
JsPlumb.ready(函数(){ jsPlumb.importDefaults({ ConnectorZIndex:5 })；var jsP = jsPlumb.getInstance({ PaintStyle:{ lineWidth:2，strokeStyle:"#000"，outlineColor:"black"
浏览 3提问于2012-12-19得票数 8
回答已采纳
1回答
我正在尝试实现一个分层树(使用React & JsPlumb)，在节点之间使用循环连接，并将两个节点连接成一个节点。问题是在连接时，层次树的定位不能正常工作。实际上，环路连接与其他节点重叠。我尝试使用Bezier连接器将结束节点连接到分层树中的开始节点，从结束节点的底部锚点连接到开始节点的顶部锚点，而不重叠节点。但是，通过重叠节点，树从结束节点的顶部锚点连接到开始节点的底部锚点。elementsDraggable: false, enableWheelZo
浏览 10提问于2019-04-19得票数 3
回答已采纳
我正在为一个中等规模的项目使用jsPlumb。虽然文档在可靠的解释方面很苗条，但我已经完成了这个项目，现在我已经准备好交付它了。
就在送货日期之前，我被要求把连接线改为直线，而不是弯曲。我认为这就像在jsPlumb连接方法中添加关键字一样简单，比如：jsPlumb.connect({ connector: 'Straight'... }).而且确实如此。那有什么问题吗？但是，如果将connect()方法中的connect()选项更改为“直”，则当我单
浏览 1提问于2013-03-16得票数 3
回答已采纳
我正在为我在jsPlumb中的连接创建自定义覆盖。divs本身应该是可连接的，也就是说，我想连接两个不同连接器的标签。var overlay_div = $(connection.overlays[0].canvas);连接器
浏览 4提问于2013-05-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
