ID von Drop div mit Dragula Javascript

Question

Ich versuche, ein c3.js Diagramm mit Drag & Drop mit Dragula.js zu aktualisieren, aber ich weiß nicht, wie man die ID des div, das in ein neues gezogen wird Container. Mein HTML ist so etwas wie dieses:

<div id="collapse1" class="panel-collapse collapse"> 
    <div id="color1" class="form-inline">1</div> 
    <div id="color2" class="form-inline">2</div> 
    <div id="color3" class="form-inline">3</div> 
</div> 
<div id="collapse2" class="panel-collapse collapse"> 

</div> 

und ich bin mit dragula.js per Drag & Drop:

dragula([collapse1,collapse2]); 

Ich bin wirklich neu in Jquery, aber nach this question, die ID für den Zugriff auf die <div> fiel in collapse2 in ich so etwas wie dies zu tun versuchte:

alert($("#collapse1.collapse2 div:first").attr("id")); 

aber keine Ergebnisse. Jede mögliche Hilfe würde wirklich geschätzt werden

Answer 1

Kann die Frage nicht direkt beantworten, weil ich dragula nicht kenne. Allerdings habe ich jqueryUI Drag Drop ausgiebig verwendet und es ist ein wirklich gutes Werkzeug. Vielleicht möchten Sie diesen Rahmen ausprobieren.

Da Sie nach einem Beispiel gefragt haben, habe ich etwas von meinem alten Code gegraben. Vielleicht möchten Sie die jqueryUI-Dragbar- und Droppable-Tutorials durchsehen, um Ihnen einen Hintergrund zu geben, bevor Sie sich das ansehen. Ich habe Teile einer Funktion eingefügt. Ich habe kleine Punkte gesetzt, um Ihnen zu zeigen, wo Code weggelassen wurde. Ich habe < < < nächsten die Schlüsselzeilen für Sie gelegt. Beachten Sie, wie ich mit closure Referenzen für verschiedene Teile verfügbar machen kann. Schließung ist soooo super. Ich missbrauche den Tod daraus, also lerne, wie man es benutzt, wenn du kannst.

Beachten Sie, dass, sobald ich meine Drag-Objekt, das ist, was Sie verlangen. Beachten Sie, wie ich die Variable später auf meine Funktion referenziere, wenn ich die ziehbare Datei registriere.

Btw, beachten Sie, es gibt auch eine Stop-Drag-Funktion referenziert, die ich nicht die Definition von zeigen. Wenn Sie die Deklaration des dragObject außerhalb von startDrag verschieben, können Sie dies auch in stopDrag sehen, da die Definition der Funktion in der externen Registerfunktion "eingeschlossen" ist.

function tapeChart_registerDraggables(parentObject,scope) { 

    if ((parentObject==null)||(parentObject==undefined)) { 
     parentObject=$jq(document.body); 
    } 

    var availablesShow = false; 
    var savingToServer = false; 
    var dragClone = null; 

    var startDrag = function(event, ui) { 

     tapeChartDraggingReservation = true; 

     var dragObject = event.target; <<<<<< 

     if (dragObject.getAttribute("unassigned")=="true") { 
      var is_chrome = window.chrome; 
      var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1; 
      if (!is_chrome && !is_safari) { 
       $(ui.helper).css("margin-left", event.clientX - $(dragObject).offset().left); 
       $(ui.helper).css("margin-top", event.clientY - $(dragObject).offset().top);    
      } 
     } 

     ... 

     // assigned rooms 
    if (scope!="UNBLOCKED") { 
     // register items in the grid 
     $(parentObject).find(".NODRAGHELPER").draggable(
      { 
       snap : "true",     
       revert : "invalid", 
       start: startDrag, <<<< 
       stop: stopDrag 
      } 
     ) 
     .click(function(){ 
      if ($(this).is('.NODRAGHELPER-dragging')) { 
       return; 
      } 

      // seems that the user can drop and click fast 
      // prevent this 
      if (!savingToServer) { 
       tapeChart_getReservation(this); 
      } 
      return false; 
     }); 
    } 

    ... 

Answer 2

Dragula gibt Ihnen die ID von drop.

const dragula = Dragula(['', '']); 
     dragula.on('drop', (el, target, source, sibling) => { 
     const itemId = get(el, 'id'); 
}