Javascript 操纵放置在画布上的元素之间的连接
在这里，我能够将元素放到画布上，并在它们之间创建连接。但每次我在画布中拖动已拖放的元素时，锚点不会随拖动的元素一起移动。相反，当我尝试创建从隔离锚点到另一个元素的连接时，它会立即将自身与其父元素重新定位。这是一个问题，我还希望在删除其父元素时删除锚/连接Javascript 操纵放置在画布上的元素之间的连接,javascript,jquery,jsplumb,Javascript,Jquery,Jsplumb,在这里，我能够将元素放到画布上，并在它们之间创建连接。但每次我在画布中拖动已拖放的元素时，锚点不会随拖动的元素一起移动。相反，当我尝试创建从隔离锚点到另一个元素的连接时，它会立即将自身与其父元素重新定位。这是一个问题，我还希望在删除其父元素时删除锚/连接 <!doctype html> <html> <head> <script src="../lib/jquery.min.js"></script> <scri
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.chevron-toolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: powderblue;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.chevron {
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-color: powderblue;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="chevron-toolbox" id="cId">
</div>
<div id="dropArea">
</div>
<button id="go">Double Click Me</button>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".chevron-toolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.chevron-toolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("chevron");
$(droppedElement).draggable({containment: "dropArea"});
$(droppedElement).appendTo('#dropArea');
setId(droppedElement);
var droppedId = $(droppedElement).attr('id');
var common = {
isSource:true,
isTarget:true,
connector: ["Flowchart"],
};
jsPlumb.addEndpoint(droppedId, {
anchors:["Right"]
}, common);
jsPlumb.addEndpoint(droppedId, {
anchors:["Left"]
}, common);
alert(droppedId);
//Delete an element on double click
var dataToPass = {msg: "Confirm deletion of Item"};
$(droppedElement).dblclick(dataToPass, function(event) {
alert(event.data.msg);
$(this).remove();
});
}
});
//Set a unique ID for each dropped Element
var indexer = 0;
function setId(element){
indexer++;
element.attr("id",indexer);
}
});
</script>
</body>
</html>
.雪佛龙工具箱{
位置：绝对位置；
宽度：72px；
高度：80px；
背景色：粉蓝色；
背景图片：url（“../dist/img/bigdot.png”）；
边框：实心3px红色；
}
#下降区{
光标：指针；
边框：实心1px灰色；
宽度：800px；
左边距：80px；
高度：400px；
位置：相对位置；
溢出-x：滚动；
溢出y：滚动；
}
雪佛龙先生{
位置：绝对位置；
光标：指针；
宽度：72px；
高度：80px；
背景色：粉蓝色；
背景图片：url（“../dist/img/bigdot.png”）；
}
双击我
jsPlumb.ready（功能（e）
{
jsPlumb.setContainer（$（“#dropArea”）；
$（“.chevron工具箱”）.draggable
({
助手：“克隆”，
光标：“指针”，
公差：“配合”，
回复：真
});
$（“#dropArea”）。可拖放
({
接受：'.chevron工具箱'，
遏制：“下降区”，
drop：函数（e、ui）{
droppedElement=ui.helper.clone（）；
helper.remove（）；
$（droppedElement）.removeAttr（“类”）；
jsPlumb.repaint（ui.helper）；
$（droppedElement）.addClass（“雪佛龙”）；
$（droppedElement）.draggable（{containment:“dropArea”}）；
$（droppedElement）。附加到（“#dropArea”）；
setId（droppedElement）；
var droppedId=$（droppediElement）.attr（'id'）；
普通变量={
来源：是的，
isTarget:没错，
连接器：[“流程图”]，
};
jsPlumb.addEndpoint（droppedId{
主播：[“右”]
}，普通）；
jsPlumb.addEndpoint（droppedId{
锚定：[“左”]
}，普通）；
警报（droppedId）；
//双击时删除元素
var dataToPass={msg:“确认删除项”}；
$（droppedElement）.dblclick（dataToPass，函数（事件）{
警报（event.data.msg）；
$（this.remove（）；
});
}
});
//为每个删除的元素设置唯一的ID
var指数=0；
函数setId（元素）{
索引器++；
元素属性（“id”，索引器）；
}
});
jsPlumb.connect({
source:'window2',
target:'window3',
paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11 )'},
anchors:["Bottom", "Top"],
endpoint:"Rectangle"
});
这只是一个例子。在实现中遵循此模式将有助于访问有关这些连接的详细信息，并删除元素旁边的连接欢迎使用Stackoverflow。请分享相关的代码片段。我已经提供了上面修改过的代码。我能够为删除的元素分配唯一的ID并创建连接。现在我正在处理的问题已经在问题中提到了