我正在使用jsPlumb,正在尝试创建一个包含2个元素的简单工具箱。这些元素需要拖放到画布上,在其中可以执行进一步的操作,例如在它们之间创建连接并删除它们。但是现在,我已经能够在droppable方法下接受2 div了。根据接受的div,要添加的类和要添加到元素的字段会更改。以下代码的工作版本:https : //github.com/NayantaraJeyaraj/MultipleElements
$(".project").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$(".query").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
和droppable方法:
$("#container").droppable
({
accept: '.project, .query',
containment: 'container',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "container"});
$('#container').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent'
});
newAgent.dblclick(function(e) {
jsPlumb.detachAllConnections(newAgent.attr('id'));
jsPlumb.removeAllEndpoints($(this));
jsPlumb.detach($(this));
$(newAgent).remove();
});
i++;
}
});
我需要这段代码来做的是,当接受的div为“ .project”时,将“ pro”类添加到newAgent(如代码中所示),否则,如果接受的div为“ .query”,则需要添加“ que”类而不是pro类。但是在这里,当前它为这两个实例添加了pro类。我如何才能检测到哪个被接受,然后相应地添加该类?
我曾长期与jsplumb为我的项目,我觉得你可以看看这个codepen: - http://codepen.io/soniabhishek/pen/XjNYGp?editors=1010
//This is specific function when drop occurs
jsPlumb.draggable(c1_1,{
stop: function(params){
console.log("dropped", params)
}
});
在这里,我有一些拖放,基本选择和组概念的基本示例。
尤其要寻找您特别想要的停止功能。
谢谢。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句