<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
var conn = "";
var instance = "";
$(function(){
create_line("b");
$('#b').click(function(){
create_line("b");
});
$('#c').click(function(){
create_line("c");
});
});
function create_line(el){
jsPlumb.ready(function() {
if(conn!=""){
jsPlumb.detach(conn);
}
instance = jsPlumb.getInstance({
Anchors : [ "Center", "Center" ],
DragOptions : { cursor: 'pointer', zIndex:2000 },
EndpointStyles : [{ fillStyle:"red", outlineColor:"white", outlineWidth:10 }, { fillStyle:"red", outlineColor:"white", outlineWidth:10 }],
Endpoints : [ ["Dot", { radius:5 } ], [ "Dot", { radius:5 } ] ],
PaintStyle : {
strokeStyle:"red",
lineWidth:3
}
});
var a = jsPlumb.getSelector("#a");
instance.draggable(a);
conn = instance.connect({
source:a,
target:el,
connector:[ "Straight" ]
});
});
}
http://jsfiddle.net/wwc7G/5/
当windows加载时,a和b之间的线路连接器会移动,但当我单击c时,a和c之间的线路连接器不会移动。
请帮助我,对不起我的英语。
最佳答案
从parent
呼叫中删除makeSource
对我有效。
http://jsfiddle.net/wwc7G/27/
jsPlumb.ready(function() {
jsPlumb.Defaults.Container=$("#container");
jsPlumb.Defaults.PaintStyle = { strokeStyle:"#F09E30", lineWidth:2, dashstyle: '3 3', };
jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"#F09E30" };
jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
var i = 1;
$('#addproject').click(function(e) {
var newAgent = $('<div>').attr('id', 'project' + i).addClass('project');
newAgent.text('Project ' + i);
$('#container').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent'
});
i++;
});
$("#container").on('click','.project',function(e) {
var newState = $('<div>').attr('id', 'state' + i).addClass('task');
var title = $('<div>').addClass('title').text('Task ' + i);
var connect = $('<div>').addClass('connect').text('click here to drag a bond');
newState.css({
'top': e.pageY,
'left': e.pageX
});
newState.append(title);
newState.append(connect);
$(this).append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connect, {
anchor: 'Continuous'
});
newState.dblclick(function(e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
i++;
});
});