我在用jsPlumb。
我的当前功能允许我创建一个.project
div,然后可以在其中包含.task
div。.project
div有3个可点击的按钮,它们都使用jQuery工作,而.project
中的.task
有一个单独的关闭按钮,这个按钮也能工作。
我们可以在这里看到:http://jsfiddle.net/9yej6/3/
(单击add项目按钮,然后单击绿色项目,然后尝试单击某个任务附近的X--应该会弹出警报)
然而,每当我试图使用.task
使makeTarget
/makeSource
成为jsPlumb时,它就超越了jQuery所做的任何其他事件(可能不是最好的词)。也就是说,当我单击.task
的X图标时,它的行为就好像我点击了.task
本身,并试图创建jsPlumb的键。
如图所示:http://jsfiddle.net/9yej6/4/
因此,下面的行不再工作(注意,我使用的是on()
函数,因为.project
/.task
div是动态创建的):
$(“#容器”).on(‘单击’,'.task .关闭‘,函数(E){警报(’任务添加被点击‘);};};
最初,addTask()
函数是(这起作用了,但不能添加jsPlumb键):
函数addTask(parentId,index) { var newState =$(‘parentId’).attr(‘id’,'state‘+index).addClass(’任务‘);var newState=$(’).addClass(‘关闭’);newState.append(关闭);var newState=$(‘标题’).text(‘任务’+索引);newState.append(标题);$(parentId).append(newState);}
但是,当我向它添加makeTarget()
/makeSource()
调用时,它似乎超过了其他任何jQuery事件处理。我的新addTask()
函数变成:
函数addTask(parentId,index) { var newState =$(‘parentId’).attr(‘id’,'state‘+index).addClass(’任务‘);var newState=$(’).addClass(‘关闭’);newState.append(关闭);var newState=$$(‘标题’).text(‘任务’+索引);newState.append(标题);$(parentId).append(newState);jsPlumb.makeTarget(newState,{锚:‘连续’});jsPlumb.makeSource(newState,{锚:‘连续’});}
发布于 2014-05-29 17:26:49
您还可以使用filter
参数来指定对象拖动所包含的元素。
请看我完整的答案,这里。
http://jsplumbtoolkit.com/doc/connections.html#sourcefilter
jsPlumb.makeSource("foo", {
filter:":not(a)"
});
上面的意思是,不要干扰与a (anchor tag)
相关的操作。
发布于 2014-05-29 00:21:50
如前所述,
$("#container").on('click','.task .close',function(e) {
alert('a task`s add was clicked');
});
这段代码无法工作,因为您已经将'.task'元素作为jsPlumb的目标或源的一部分,因此鼠标事件将由jsPlumb处理,这将阻止这些元素的默认事件处理(jQuery或纯JS)。
在这种情况下,您需要创建一个小的矩形DIV (参考图像),用户可以从这里拖动连接,而不是整个DIV。
https://stackoverflow.com/questions/23911953
复制相似问题