JQuery sortierbar (Elemente mit unterschiedlichen Höhen) zur ersten oder letzten Position zu bewegen sind mühsam

Question

Problem

ich Probleme mit meiner sortierbare Liste mit mehreren Positionen verschiedener Höhe. Das Problem tritt auf, wenn ich versuche, ein größeres Objekt an die erste oder letzte Position zu verschieben (die beide kleinere Objekte haben). Wenn ich momentan Erfolg habe, hängt es sehr davon ab, auf welchem ​​größeren Gegenstand ich klicke und anfange zu ziehen.

Wenn ich das Element an die kleinere untere Position verschieben möchte, muss ich auf den unteren Rand des Elements klicken, damit es funktioniert, und wenn ich es an die oberste Position ziehen möchte, muss ich knapp oben klicken. Aber ich möchte den Gegenstand ziehen können, indem ich irgendwo klicke.

Einige zusätzliche Informationen

Die Elemente außerhalb der Eltern und die Eltern können nicht nur gezogen werden, ist so groß, wie es und ein Scroll erscheint sein muss, wenn es größer ist, als es Behälter ist. Es scheint also, dass ich das größere Objekt nicht über das erste (kleinere) Objekt ziehen kann, wenn ich es nicht in den oberen Teil des Objekts ziehe.

Ich habe versucht, dies zu beheben, indem Sie cursorAt verwenden und top: 0 und einen anderen Test mit bottom: 0 Aber es scheint keinen Unterschied zu machen (so habe ich möglicherweise missverstanden, wie man es benutzt). Ich verwende derzeit Toleranz: Zeiger.

Ich kann das Problem umgehen, dass ich nicht in der Lage sein werde, den größeren Gegenstand an die letzte Position zu ziehen, indem ich während der Sortierung die Höhe mit der Höhe des gezogenen Gegenstandes verändere. Aber es funktioniert nicht immer und es ist keine sehr gute Lösung. Und das Problem, es nicht nach oben ziehen zu können, erscheint immer noch?

Ich kann den Code JQuery ändern, wie in jquery-sortable-with-containment-parent-and-different-item-heights

Frage: Wie kann ich ein größeres Element an der oberen oder unteren Position ziehen, wodurch der Benutzer eine beliebige Stelle auf dem Element klicken?

Danke für Ihre Hilfe!

Answer 1

Dies könnte Ihr Problem nicht lösen, aber ich dachte, ich würde die Ergebnisse einiger Experimente teilen, die ich heute gemacht habe. Ich musste eine sortierbare Fotogalerie mit Inline-Block-Bildern unterschiedlicher Breite erstellen und fand heraus, dass das Bewegen breiterer Fotos sehr mühsam wäre, weil der Platzhalter kleiner als der Gegenstand war, den ich bewegte. Ich landete mit dieser:

container.sortable({ 
     placeholder: "photo placeholder", 
     start: function (event, ui) { 
      ui.placeholder.width(ui.item.width()); 
     } 
    }); 

Die benutzerdefinierte Platzhalter Klassen gibt es den Platzhalter, um sicherzustellen, ist nicht standardmäßig ausgeblendet, und die start Ereignis sorgt dafür, dass der Platzhalter die gleiche Breite wie der Artikel ist Sie sind dabei, Bewegung. Dies funktionierte sehr gut für mich, und in Ihrem Fall könnte das Ersetzen der Höhe durch die Breite funktionieren.

Ich habe auch versucht, containment, wie Sie getan haben, und festgestellt, dass es manchmal die Dinge viel schwieriger je nach den Elementen in der Zeile macht. Wie Sie bereits erklärt haben, hilft auch tolerance: "pointer", die Probleme zu beheben, aber wenn möglich, macht das Entfernen von containment die Benutzeroberfläche im Allgemeinen fehlerverzeihender.