0
ユーザーがツールボックスから要素をドラッグしてキャンバスにドロップし、次にそれらを互いに接続できる単純なUIを作成しました。しかし、接続ポイント(要素の左隅にある白い四角)、一意のIDをそれぞれ与えた後に接続しようとすると、接続線はキャンバス内の他の場所から始まり、下に示すように接続されません。すぐにマウスを離すと、コネクタの線が消えます。jsPlumbの要素間の接続の作成
ここで私は要素
function dropCompleteElement(newAgent,i,e,kind)
{
$(droppedElement).draggable({containment: "container"});
var finalElement = newAgent;
r++; q++;
if(kind=="import")
{
var connection = $('<div>').attr('id', i + '-import').addClass('connection');
}
else if (kind=="export")
{
var connection = $('<div>').attr('id', i + '-export').addClass('connection');
}
else
{
var connection = $('<div>').attr('id', i + '-defined').addClass('connection');
}
finalElement.css({
'top': e.pageY,
'left': e.pageX
});
finalElement.append(connection);
$('#container').append(finalElement);
jsPlumb.draggable(finalElement, {
containment: 'parent'
});
jsPlumb.makeTarget(connection, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connection, {
anchor: 'Continuous'
});
$("#container").removeClass("disabledbutton");
$("#toolbox").removeClass("disabledbutton");
var myNode = document.getElementById("lot");
var fc = myNode.firstChild;
while(fc) {
myNode.removeChild(fc);
fc = myNode.firstChild;
}
$(".toolbox-titlex").hide();
$(".panel").hide();
}