首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jsPlumb:不能在充当jsPlumb源/目标的div中单击()

jsPlumb:不能在充当jsPlumb源/目标的div中单击()
EN

Stack Overflow用户
提问于 2014-05-28 12:43:45
回答 2查看 958关注 0票数 2

我在用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,{锚:‘连续’});}

EN

回答 2

Stack Overflow用户

发布于 2014-05-29 17:26:49

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

请看我完整的答案,这里

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

代码语言:javascript
运行
复制
jsPlumb.makeSource("foo", {
  filter:":not(a)"
});

上面的意思是,不要干扰与a (anchor tag)相关的操作。

票数 3
EN

Stack Overflow用户

发布于 2014-05-29 00:21:50

如前所述,

代码语言:javascript
运行
复制
$("#container").on('click','.task .close',function(e) {
    alert('a task`s add was clicked');
});

这段代码无法工作,因为您已经将'.task'元素作为jsPlumb的目标的一部分,因此鼠标事件将由jsPlumb处理,这将阻止这些元素的默认事件处理(jQuery或纯JS)。

在这种情况下,您需要创建一个小的矩形DIV (参考图像),用户可以从这里拖动连接,而不是整个DIV。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23911953

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档