javascript - 在 jsPlumb 中拖放各种元素

Question

我正在使用 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 类。我如何检测哪个被接受然后相应地添加类？

Answer 1

我在我的项目中使用 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)
  }

});

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

特别是寻找您特别寻找的停止功能。

谢谢。