标签: jsplumb
JsPlumb - 在可拖动元素上使用时,端点不刷新位置
我开始使用jsPlumb和JQuery,我想连接可拖动的元素,但如果我在连接之前添加可拖动的行为,那么连接不会刷新位置.
我的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.window {
background-color: white;
border: 3px solid #346789;
color: black;
font-family: helvetica;
font-size: 0.8em;
height: 12em;
opacity: 0.8;
padding: 0.5em;
position: absolute;
width: 14em;
z-index: 20;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
</head>
<body>
<div>
<div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() { …3
推荐指数
推荐指数
1
解决办法
解决办法
6376
查看次数
查看次数
jsPlumb：端点位置错误
使用Dojo，以编程方式创建盒子并将其放置到主div的内部div中，然后使用addEndpoint（）将端点添加到我的盒子中，问题是端点未放置在正确的位置。这是我的代码
<div data-dojo-attach-point="containerNode" class="divCenter navEditorDiv" style="">
<button data-dojo-attach-event="onClick: showPopOut" data-dojo-attach-point="createNode"
class="btn btn-primary fa fa-plus-square position" style=""></button>
<div data-dojo-attach-point="navigationNode"></div> </div>
上面的代码是我的HTML
jsplumbInstance: function () {
if (!this._instance) {
this._instance = 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. …3
推荐指数
推荐指数
1
解决办法
解决办法
1034
查看次数
查看次数
向顶点添加叠加箭头不起作用
我正在使用此makeSource代码并根据文档添加端点样式:
jsPlumb.makeSource(connect, {
parent: newEntity,
anchor: 'Continuous',
connector: 'Flowchart',
paintStyle: {
fillStyle: 'rgba(123, 123, 123, 1)',
radius: 1,
},
overlays:[
['Arrow', {width: 10, length: 30, location: 1}],
],
});
我没有收到错误.
2
推荐指数
推荐指数
1
解决办法
解决办法
1838
查看次数
查看次数
JSplumb 可滚动容器
我正在尝试制作一个类似于此处演示的 JSPlumb 应用程序，其中当您将项目拖向屏幕边缘时，容器元素会滚动。到目前为止，我有这个示例，其中元素是可拖动的，但它们受到周围容器的约束，极大地限制了屏幕上可以显示的元素数量。
我用这个片段启动可拖动对象。也许这里有一个有效的可滚动属性？
jsPlumb.draggable(newState, {
containment: 'parent'
});
我一生都无法找出到底是什么使另一个滚动，我尝试更改 css 并向可拖动对象添加一些 jqueryUI 属性，但无济于事。
有更多 JSPlumb 经验的人是否知道如何使容器扩展？
2
推荐指数
推荐指数
1
解决办法
解决办法
1833
查看次数
查看次数
1
推荐指数
推荐指数
1
解决办法
解决办法
1156
查看次数
查看次数
元素不在jsPlumb中拖动
使用jsPlumb拖放时,某些东西无法正常工作.我让左侧的div可拖动,但是当你试图拖动它们时,只有线条移动,而不是div.这是我的代码:
<html>
<head>
<title>Plumb Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.16-all-min.js "></script>
<script type="text/javascript">
$(document).ready(function(){
jsPlumb.draggable($(".left"));
jsPlumb.connect({source:"div1", target:"div2",
paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},
endpointStyle:{fillStyle:'rgb(243,229,0)'}
});
jsPlumb.connect({
source:'div3',
target:'div4',
paintStyle:{ lineWidth:10, strokeStyle:'rgba(0, 0, 200, 0.5)' },
anchors:["RightMiddle", "LeftMiddle"],
endpoint:[ "Rectangle", { width:10, height:8 } ]
});
jsPlumb.connect({
source:'div2',
target:'div3',
paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11)'},
anchors:["BottomCenter", "TopCenter"],
endpoint:"Rectangle"
});
$("#div1").css("background-color","blue");
});
</script>
<style>
#div1, #div4{background-color:red;width:150px;height:150px;}
#div2, #div3{background-color:green;width:150px;height:150px;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div id="div1" class="left">This is a test</div>
<div id="div2" class="right">This is a div</div>
<div id="div3" …1
推荐指数
推荐指数
1
解决办法
解决办法
2806
查看次数
查看次数
在jquery中获取jsplumb中每个连接器的源和目标
我正在使用jsplumb在HTML中创建一个流程图,以将连接器从一个div添加到另一个div.每次我创建从1 div到另一个div的连接时,我的jquery代码会为他的连接器创建一个svg.
我想创建一个流程图的xml,以便我可以保持图的流程,我需要找到给定svg连接器(jsplumb连接器)的源和目标.
基本上我想以xml格式存储流程图,源和目的地都在理想的位置.
谁能帮我.
0
推荐指数
推荐指数
1
解决办法
解决办法
4157
查看次数
查看次数
jsPlumb 与 Angular 5+ 拖放连接
我正在努力使用 jsPlumb 社区版通过拖放将元素与鼠标连接。
我尝试制作由用户连接的元素流并导出到 Json。
看：https : //stackblitz.com/edit/angular-jsplumb-test-rx8hdy
感谢您的帮助 ！！
0
推荐指数
推荐指数
1
解决办法
解决办法
2729
查看次数
查看次数