在jsPlumb中拖放各种元素

Nayantara jeyaraj

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

阿比舍克·索尼(Abhishek Soni)

我曾长期与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)
  }

});

在这里,我有一些拖放,基本选择和组概念的基本示例。

尤其要寻找您特别想要的停止功能。

谢谢。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在jsPlumb中拖放各种元素

来自分类Dev

避免在jsPlumb中覆盖连接和元素

来自分类Dev

如何从各种元素中随机选择

来自分类Dev

删除jsPlumb中的所有连接以及元素

来自分类Dev

jsPlumb拖动元素位置

来自分类Dev

jsPlumb连接拉斐尔元素

来自分类Dev

javascript拖放-防止元素拖放到另一个droppable元素中

来自分类Dev

javascript拖放-防止元素拖放到另一个droppable元素中

来自分类Dev

设置jsPlumb行的容器元素

来自分类Dev

创建可以在各种元素/类中的可重用 ACF 字段

来自分类Dev

CKEDITOR小部件将拖放到所需元素中

来自分类Dev

拖放JQuery UI后在列表中查找元素的索引

来自分类Dev

如何将元素拖放到kendoSortable列表中?

来自分类Dev

CKEDITOR小部件将拖放到所需元素中

来自分类Dev

jQuery将拖动的元素拖放到许多div中

来自分类Dev

拖放列表元素

来自分类Dev

子元素允许拖放

来自分类Dev

拖放并使该元素响应

来自分类Dev

jQuery与动态元素的拖放

来自分类Dev

拖放元素定位

来自分类Dev

拖放删除目标元素

来自分类Dev

在Javascript中,如何检测包含子数组和单个元素的数组中的各种元素?

来自分类Dev

使拖放的元素可拖放,同时仍可拖动

来自分类Dev

jsPlumb可拖动元素javascript函数

来自分类Dev

使用jsPlumb调整元素大小并拖动

来自分类Dev

拖动元素时将内部html拖放到另一个元素中

来自分类Dev

拖放时的角度性能:各种目标和突出显示

来自分类Dev

拖放到缩放的元素上

来自分类Dev

允许拖放包含iframe的元素