JQuery UI ziehbar/abwerfbaren Raster ausrichten positioniert nicht richtig

Question

Ich habe für eine einfache Aufgabe ausprobieren jQueryUI wo ich brauche einen grundlegenden drag zu implementieren und Drop-Funktion. Ich habe festgestellt, dass die Elemente bei der Verwendung der Option "In Raster einrasten" nicht korrekt ausgerichtet sind, wenn sie auf den Zielcontainer fallen gelassen werden. Es berechnet die Position des ziehbaren Elements aus seinem Container, obwohl ich das Containment als Zielbereich definiert habe.

sehen einen Beispielcode hier: https://jsfiddle.net/9yzL87md/7/

$(function() { 
     $(".spare-item").draggable({ 
      grid: [ 26, 26 ], 
      containment: "#preview", 
      cursor: "grab", 
      revert: "invalid", 
      start: function(event, ui) { 
       console.log(ui); 
       console.log(ui); 
      }     
     }); 
     $("#preview").droppable({ 
       accept: ".spare-item", 
       over: function(event, ui) { 
        $(".spare-item").draggable({ 
         grid: [26, 26] 
        }); 
       }, 
       out: function(event, ui) { 
        $(".spare-item").draggable("option", "grid", false); 
       }, 
     drop: function(event, ui) { 
      var pos = ui.draggable.offset(), dPos = $(this).offset(); 
      //console.log(pos.top - dPos.top, pos.left - dPos.left); 
     } 
     });    
    }); 

oben ist ein Beispiel für mein Layout zum leichteren Verständnis. Wenn Sie versuchen, das rote Element zu ziehen, wird es sofort in das graue Feld übernommen, aber es wird etwas niedriger als der untere Rand gefangen. Ich habe viele ähnliche Fragen und Lösungen ausprobiert, hatte aber kein Glück. Was fehlt mir hier? (Die Breite des Behälters ist 234px, und die Breite der roten Elemente sind 26px. Ich erwarte, dass die roten Elemente in einem 26 x 26 Raster ausgerichtet werden)

Answer 1

Sie hier mehrere Probleme. Die ziehbaren Elemente befinden sich immer noch im unteren Teilbereich und werden durch Ränder und Abstände beeinflusst, die sie relativ zu Ihrem .item-Container verschieben. Schließlich, weil sie inline-Blockelemente sind (im Gegensatz Elemente zu blockieren) die Leerzeichen zwischen Tags verursacht es einen leeren Raum zwischen den Elementen sein. Entweder Sie wandeln sie in Blockelemente um oder es kann keine Leerzeichen zwischen den div -Tags der Ersatzelemente geben.

Das Raster scheint um die Position des ursprünglichen Elements versetzt zu sein, so dass die Offset-Gitter eines Offset-Ersatzelements ein Offset-Gitter haben.

Ergebnis: https://jsfiddle.net/9yzL87md/10/

1. Margen und Polsterungen

weder .output, .actions oder .Item-Container können Ränder oder Polsterungen, die die Ersatz-Elemente beeinflussen.

.output{ 
    background:#646464; 
# padding: 5px; removed 
} 

.actions{ 
    width: 234px; 
    margin: 0px auto; 
# padding: 5px; removed 
} 

.item-container{ 
    height: 26px; 
    margin: 0px auto; #no vertical 
} 

.spare-item{ 
    background: red; 
    display: inline-block; 
    width: 26px; 
    height: 26px; 
    margin: 0 0; # no horizontal margin 
} 

2. inline-block Leerzeichen

Inline-Block-Elemente haben einen Raum zwischen ihnen, wenn es irgendwelche Leerzeichen an allen (Raum, Tabulator, neue Zeile).machen so entweder die Ersatz Artikel Elemente Anzeige: Block oder entfernen Sie das Leerzeichen zwischen ihnen mit irgendeiner Variation der folgenden Möglichkeiten:

<div class="actions item-container"><!-- 
    --><div class="spare-item"></div><!-- 
    --><div class="spare-item"></div><!-- 
    --><div class="spare-item"></div><!-- 

->

oder einer der anderen Tricks hier beschriebenen https://css-tricks.com/fighting-the-space-between-inline-block-elements/

, falls der Link stirbt, sind die Optionen aufgelistet:

• die Tags verschieben, so dass keine Leerzeichen zwischen divs dort
• html sind Kommentare zwischen divs
• negativer Marge divs auf dem Artikel Leerzeichen
• nicht setzt schließende Tags zu begegnen, weil html5 es erlaubt (havent diese getestet)
• Schriftgröße: 0; auf den Artikel-Container (funktionierte nicht für mich)

Answer 2

Das Problem Ihr ist die Polsterung und Marge in den Klassen actions, item-container und die spare-item aufgrund aufweist. Wenn Sie in diesen Klassen den Rand und das Padding auf Null setzen, wird das Problem behoben. z.B.

.actions{ 
    width: 234px; 
    margin: 0px auto; 
    padding: 0px; /*Updated*/ 
} 

.item-container{ 
    height: 26px; 
    margin: 0px auto; /*Updated*/ 
} 

.spare-item{ 
    background: red; 
    display: inline-block; 
    width: 26px; 
    height: 26px; 
    margin: 0px 0px; /*Updated*/ 
} 

Die jquery wird für die Polsterung und Spielraum zwischen dem #preview und dem actions item-container divs nicht entfallen, wenn die Positionsverschiebungen zu berechnen, die es an das Netz mit einem oberen Spalte gleich den Spalt zwischen dem 2 Behälter einschnappen verursacht . Also, um dieses Problem beheben Sie bitte den Abschnitt ‚Bearbeiten für Lösung‘ siehe unten:

[Edit für Lösung]

einfach zu aktualisieren für eine Lösung für alle zu diesem Thema. Sie müssen die Option snap verwenden und den Wert für das Rasterelement in der ziehbaren Funktion des Elements festlegen. z.B. um Ihre Geige nur hinzufügen, um diese snap Eigenschaft in den spare-items ziehbar Methode Optionen wie folgt festzusetzen:

 $(".spare-item").draggable({ 
      grid: [ 26, 26 ], 
      containment: "#preview", 
      cursor: "grab", 
      revert: "invalid", 
      start: function(event, ui) { 
       console.log(ui); 
       console.log(ui); 
      }, 
      snap: '#preview' // removes any margin or padding from the item 
     }); 

Hoffnung, dies hilft Ihnen und alle, die dieses Problem auftreten. Glückliche Kodierung. :)