在 jsPlumb 中拖放各种元素答案

【问题标题】：Drag and Drop a variety of Elements in jsPlumb在 jsPlumb 中拖放各种元素
【发布时间】：2016-05-30 08:43:49
【问题描述】：

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

【问题讨论】：

标签： javascript jquery jsplumb

【解决方案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)
  }

});

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

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

谢谢。

【讨论】：