在jsPlumb中拖放各种元素

问题描述：

我正在使用jsPlumb，并试图创建2个元素的简单工具箱。需要将这些元素拖放到画布上，以便在其中执行进一步的操作，例如在它们之间创建连接并删除它们。但就目前而言，我已经能够接受2分的方式。取决于接受的div，要添加的类以及要添加到元素更改的字段。下面的代码的工作版本：https://github.com/NayantaraJeyaraj/MultipleElements 在jsPlumb中拖放各种元素

$(".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++; 
     } 
    });

我需要这段代码做的是，以“亲”类添加到newAgent（如代码所示）当接受的div是'.project'否则如果接受的div是'.query'它需要添加“que”类而不是pro类。但在这里，目前它为两个实例添加了专业类。我如何检测哪些被接受，然后相应地添加课程？

答

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

});

在这里，我有拖拽的一些基本的例子，多选，以及作为组的概念。

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

谢谢。

在jsPlumb中拖放各种元素

相关推荐