jsPlumb：无法在div内部的div上单击（）作为jsPlumb源/目标

Question

我正在使用jsPlumb。
我当前的功能允许我创建一个.project div，然后可以在其中包含.task个div。 .project div有3个可点击的按钮，这些按钮都可以使用jQuery工作，而.task中的.project只有一个关闭按钮也可以使用。

我们在这里可以看到：http://jsfiddle.net/9yej6/3/
（单击添加项目按钮，然后单击绿色项目并尝试在某个任务附近单击X - 将弹出警报）

但是，每当我尝试使用jsPlumb使.task成为makeTarget / makeSource时，它超过（可能不是最佳单词）jQuery完成的任何其他事件。那就是当我点击.task的X图标时，就好像我点击.task本身并尝试创建jsPlumb的债券一样。

从这里可以看出：http://jsfiddle.net/9yej6/4/

因此，以下行不再有效（请注意我使用on()函数，因为.project / .task div是动态创建的：

$("#container").on('click','.task .close',function(e) {
  alert('a task`s add was clicked');
});

最初addTask()功能是（有效，但你无法添加jsPlumb债券）：

function addTask(parentId, index) {
  var newState = $('<div>').attr('id', 'state' + index).addClass('task');

  var close = $('<div>').addClass('close');
  newState.append(close);

  var title = $('<div>').addClass('title').text('task ' + index);;
  newState.append(title);

  $(parentId).append(newState);
}

但是当我向它添加makeTarget() / makeSource()次调用时，它似乎超越了任何其他jQuery事件处理。我的新addTask()函数变为：

function addTask(parentId, index) {
  var newState = $('<div>').attr('id', 'state' + index).addClass('task');

  var close = $('<div>').addClass('close');
  newState.append(close);

  var title = $('<div>').addClass('title').text('task ' + index);;
  newState.append(title);

  $(parentId).append(newState);

  jsPlumb.makeTarget(newState, {
    anchor: 'Continuous'
  });

  jsPlumb.makeSource(newState, {
    anchor: 'Continuous'
  });
}

Answer 1

如上所述，

$("#container").on('click','.task .close',function(e) {
    alert('a task`s add was clicked');
});

此代码不起作用，因为您已将'。task'元素设为jsPlumb的目标或源部分，因此鼠标事件将由jsPlumb处理，这会阻止这些元素的默认事件处理（jQuery或纯JS）。

在这种情况下，您需要创建一个小矩形DIV（参考图像），用户可以从中拖动连接而不是整个DIV。

Answer 2

您还可以使用filter参数指定要为对象拖动包含的元素。

请参阅我的完整答案here。

http://jsplumbtoolkit.com/doc/connections.html#sourcefilter

jsPlumb.makeSource("foo", {
  filter:":not(a)"
});

以上意思是，不要干涉与a (anchor tag)相关的操作。