Search code examples
javascriptjqueryjsplumb

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.


Solution

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