3

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.

Community
  • 1
  • 1
Serge P
  • 1,591
  • 8
  • 22
  • 42

1 Answers1

5
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.

coding_idiot
  • 13,526
  • 10
  • 65
  • 116
  • Thank you. Very handy. I've made a slight adjustment so that it also checks if the current source was a target of the current target (so basically you wouldn't be able to do a reverse connection), that is: `var arr2 = jsPlumb.select({ source: con.targetId, target: con.sourceId });` then I only need to do `if (arr.length + arr2.length > 1)` – Serge P Jun 11 '14 at 23:46
  • this is not the correct answer because detach(con) will not remove all the endpoints correctly under certain circumstances : http://www.jsplumb.org/doc/removing.html. A better way to do this is to check before making the connection in the first place. See this : http://stackoverflow.com/questions/22959893/jsplumb-dragging-new-connection-should-remove-existing-one – user590849 Jan 14 '15 at 00:54
  • @user590849 the OP never wanted to remove endpoints, your scenario might be different. – coding_idiot Jan 14 '15 at 05:27
  • 2
    I am getting an error like this: jsPlumb: fire failed for event connection : TypeError: jsPlumb.detach is not a function. what to do? – Darshan theerth Dec 09 '17 at 18:17