jsPlumbでさまざまな要素をドラッグアンドドロップする

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 

    }); 

そして、ドロップ可能な方法：私が行うには、コードのこの作品は、（newAgentに「プロ」クラスを追加すること、である必要がある何

$("#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'の場合、proクラスの代わりに「que」クラスを追加する必要があります。しかしここでは、現在、両方のインスタンスにproクラスを追加しています。受け入れられているものをどのように検出し、それに応じてクラスを追加するのですか？

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

}); 

私も、ドラッグ＆ドロップのいくつかの基本的な例を持っている、マルチ選択グループ概念として。

特に、あなたが特に探している停止機能を探します。

ありがとうございました。