在 jsPlumb 中拖放各种元素

Question

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

    });

以及可放置的方法：

$("#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' 否则，如果接受的 div 是 '.query'，则需要添加 "que" class 而不是 pro class。但是在这里，目前它为这两个实例添加了 pro class 。我如何检测哪个被接受然后相应地添加 class？

Answer 1

我用 jsplumb 为我的项目工作了很长时间，我想你可以看看这个代码笔:- 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)
  }

});

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

并特别寻找您特别需要的停止功能。

谢谢。

在 jsPlumb 中拖放各种元素

Drag and Drop a variety of Elements in jsPlumb

javascript

jquery

jsplumb