Question

我正在使用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

    });

可放置的方法：

$("#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”类而不是专业类。但在这里，它目前为两个实例添加了专业类。我如何检测哪些被接受，然后相应地添加该类？

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)
  }

});

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

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

感谢。

在jsPlumb中拖放各种元素

1 个答案: