Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsPlumb how to remove duplicate connections

I'm trying to avoid having duplicate connections (2 connections with same source and target) while using jsPlumb. Is there a way to do that without having to modify the jsPlumb.js itself?

http://jsfiddle.net/uQdfq/
(drag from task1 to task3 twice)

I don't want to have the restrictions of adding specific endpoints like in (1).

My .tasks are defined to be possible targets/source when they are called - that is the whole div can be a source/target, not just some endpoint:

  addTask($('#project1'), 'task' + 1);

Function itself:

// Adds a task div to the specific project
function addTask(parentId, id) {
  var newState = $('<div>').attr('id', id).addClass('task')

  // A title for the task
  var title = $('<div>').addClass('title').text(id);
  newState.append(title);

  $(parentId).append(newState);

  // Makes the task div a possible target (i.e. connection can be dragged to)
  jsPlumb.makeTarget(newState, {
    anchor: 'Continuous'
  });

  // Makes the task div a possible source (i.e. connection can be dragged from)
  jsPlumb.makeSource(newState, {
    anchor: 'Continuous'
  });
}

What would be the best way to add some condition that stops the possibility of creating duplicate connections.

like image 588
Serge P Avatar asked Feb 24 '26 13:02

Serge P


1 Answers

jsPlumb.bind('connection',function(info){
 var con=info.connection;
 var arr=jsPlumb.select({source:con.sourceId,target:con.targetId});
 if(arr.length>1){
    jsPlumb.detach(con);
 }
});

Whenever a new connection is created, check to see if there is one already existing with the same source & target, if yes, then detach the new one.

like image 73
coding_idiot Avatar answered Feb 26 '26 02:02

coding_idiot



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!