jQuery UI Sortable drückt Elemente

Question

Ich habe einige Probleme, dieses Problem zu lösen. Ich habe mir einige andere verwandte Fragen angeschaut, aber keine dieser Lösungen funktionierte für mich.

this.$el.sortable({ 
    placeholder: 'ui-state-highlight', 
    connectWith: '.connectedList', 
    dropOnEmpty: true 
}); 

Trotz einige der CSS-Tricks versuchen, die in anderen Lösungen gebucht wurde, werden die Elemente immer noch dieses Bild gesehen nach unten gedrückt:

example http://img541.imageshack.us/img541/9163/examplepm.png

Sie können ein Beispiel für die sehen Code hier: http://jsfiddle.net/jxFBj/1/

Answer 1

Ich würde sagen, die Quelle des Problems ist die vertikale Ausrichtung der Inline-Elemente, die standardmäßig Baseline ist. Allerdings ist es der Mix aus Inline- und (Inline-) Blockelementen und der Einsatz von Margin, der letztendlich das Problem auslöst. Ich denke, es ist umstritten, was der eigentliche Ursprung des Problems ist.

Egal, ich kann nicht sicher sagen, was los ist, aber für mich sieht es aus wie der Platzhalter (der keinen Inline-Inhalt hat) ändert die Position der Basislinie (nicht sicher warum genau), und so die Position von Die Bilder, die standardmäßig Inline-Elemente sind, ändern sich ebenfalls.

Es gibt ein paar Möglichkeiten, diese zu beheben:

machen die Bilder Elemente blockieren:

.sortableList-item img { 
    display: block; 
} 

Update (2015.01.13): mit neueren Browsern, die display Trick scheint das gleiche Problem zu haben wie die unten erwähnte vertical-align, dh die Elemente verschieben sich horizontal.

http://jsfiddle.net/jxFBj/2/

Schwimmelemente anstelle von Inline-Blöcke:

.ui-state-highlight { 
    float: left; 
    height: 100px; 
    width: 100px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

.sortableList-item { 
    float: left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 
} 

http://jsfiddle.net/jxFBj/3/

die vertikale Ausrichtung zu top Ändern funktioniert auch, aber horizontale Verschiebung bewirken, wenn die Liste Elemente überspannen mehrere Zeilen, also ist das wahrscheinlich kein n Option:

.ui-state-highlight { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    vertical-align: top; 
} 

.sortableList-item { 
    display: inline-block; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
} 

http://jsfiddle.net/jxFBj/4/