Drag & Drop eine Vielzahl von Elementen in jsPlumb

Question

Ich arbeite mit jsPlumb und versuche, eine einfache Toolbox von 2 Elementen zu erstellen. Diese Elemente müssen per Drag & Drop auf die Arbeitsfläche gezogen werden, wo weitere Aktionen wie das Erstellen von Verbindungen zwischen ihnen und das Löschen von Elementen ausgeführt werden können. Aber im Moment war ich in der Lage, 2 Div unter der Droppable-Methode zu akzeptieren. Abhängig vom akzeptierten Div ändern sich die hinzuzufügende Klasse und die Felder, die an das Element angehängt werden sollen. Die Arbeitsversion des folgenden Code: 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 

    }); 

Und die abwerfbaren Methode:

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

Was ich dieses Stück Code tun müssen, ist, die „pro“ Klasse zum newAgent hinzuzufügen ((wie im Code gezeigt), wenn das akzeptierte div '.project' ist, andernfalls, wenn das akzeptierte div '.query' ist, muss es die 'que'-Klasse anstelle der pro-Klasse hinzufügen. Aber hier wird derzeit die Pro-Klasse für beide Instanzen hinzugefügt. Wie kann ich feststellen, was akzeptiert wird, und dann die Klasse entsprechend hinzufügen?

Answer 1

ich mit jsplumb für mein Projekt eine lange gearbeitet und ich denke, dass Sie einen Blick auf diese codepen nehmen können: - 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) 
    } 

}); 

Hier i einige grundlegende Beispiel für Drag & Drop haben, Multi wählen, als auch als Gruppenkonzepte.

Und insbesondere suchen Sie nach Stop-Funktion, die Sie besonders suchen.

Danke.