我正在使用 jsPlumb 并尝试创建一个包含 2 个元素的简单工具箱。需要将这些元素拖放到 Canvas 上,在 Canvas 上可以执行进一步的操作,例如在它们之间创建连接和删除它们。但是现在,我已经能够在 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)
}
});
这里我有一些关于拖放、多选以及组概念的基本示例。
特别是寻找您特别寻找的停止功能。
谢谢。
关于javascript - 在 jsPlumb 中拖放各种元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37521283/