Javascript 在jsPlumb中拖放各种元素

我正在使用jsPlumb，并试图创建一个包含2个元素的简单工具箱。这些元素需要拖放到画布上，在画布上可以执行进一步的操作，例如在它们之间创建连接并删除它们。但是现在，我已经能够接受droppable方法下的2div。根据接受的div，要添加的类和要附加到元素的字段会发生变化。以下代码的工作版本：

以及可拖放方法：

$("#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++;
        }
    });

$（“#容器”）。可拖放
({
接受：'.project、.query'，
安全壳：“容器”，
drop：函数（e、ui）{
droppedElement=ui.helper.clone（）；
helper.remove（）；
$（droppedElement）.removeAttr（“类”）；
jsPlumb.repaint（ui.helper）；
var newAgent=$（''）.attr（'id'，'pro'+i）.addClass（'pro'）；
newAgent.text（'Element'+i）；
$（droppedElement）.draggable（{containment:“container”}）；
$（'#container'）.append（newAgent）；
jsPlumb.draggable（新代理{
遏制：“家长”
});
dblclick（函数（e）{
jsplump.detachAllConnections（newAgent.attr（'id'））；
jsPlumb.removeAllEndpoints（$（this））；
jsPlumb.detach（$（this））；
$（newAgent.remove（）；
});
i++；
}
});

---

我需要这段代码做的是，当接受的div为.project时，将“pro”类添加到newAgent（如代码所示），否则如果接受的div为.query，则需要添加“que”类而不是pro类。但在这里，目前它为这两个实例都添加了pro类。如何检测哪个被接受，然后相应地添加类？

我为我的项目与jsplumb合作了很长时间，我想你可以看看这个代码笔：-

这里我有一些拖放、多选以及组概念的基本示例

特别是寻找你特别想要的停止功能

谢谢

$("#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++;
        }
    });

//This is specific function when drop occurs
jsPlumb.draggable(c1_1,{
  stop: function(params){
    console.log("dropped", params)
  }

});