Umgang mit überlappenden sortierbaren jQuery-Listen

8

Dies ist ein etwas unklares Problem, aber ich benutze jQuery Sortierbar und versuche, zwei verbundene Listen gut miteinander zu verbinden, wenn man als fixed positioniert ist. Es funktioniert alles gut, bis Sie die Seite ein wenig so scrollen, dass die zwei Listen übereinander positioniert werden. Dann scheinen die Listen verwirrt darüber zu sein, welche den Gegenstand erhalten soll, der gerade gezogen wird, was bedeutet, dass Sie eine Menge Jitter bekommen, wenn er in jeder Liste erscheint / verschwindet.

Es sieht so aus, als ob beide Listen die Maus / Sortierereignisse behandeln, da das Objekt, das gezogen wird, technisch über beide Listen ist, aber was ich möchte, ist die überlagerte Liste (dh position: fixed eins) Ereignisse, so dass die zugrunde liegende Hauptliste nicht versucht, das Element zu empfangen.

Hier ist das Beispiel mit dem minimalen Code:

%Vor%

Die Frage ist also, wie repariere ich es?

    
Alconja 04.11.2010, 00:10
quelle

4 Antworten

5

Ich habe dieses Problem behoben, indem ich die eingebaute sortable -Funktion erweitert habe, um eine fixedSortable zu erstellen, die das Schweben über Listen erkennt und ignoriert, wenn eine Überlagerung vorhanden ist. Für meine Zwecke habe ich nur die Regeln hart codiert, da dies meinen Bedürfnissen / Zeitbeschränkungen entsprach, aber Sie sollten in der Lage sein, es ohne großen Aufwand komplett generisch zu machen.

Zuerst ist hier der Code (Erklärung unten):

%Vor%

Wenn Sie dies selbst anpassen, müssen Sie die beiden oben markierten Zeilen ändern. Grundsätzlich sollten die if-Anweisungen als true (und damit als false) bewertet werden, wenn das Element, über dem man schwebt ( item.instance.element und containerCache.sortable.element ), nicht das Overlay ist und das Ereignis ( this ) auftritt innerhalb der Grenzen der Überlagerung. Auf diese Weise erhält die Hauptliste niemals Ereignisse am Ort der Seite, auf der sich das Overlay befindet. In diesem Code empfängt die Hauptliste also keine Ereignisse, wenn sie in den oberen 87 Pixeln des Bildschirms vorkommen, da dies meine feste Überlagerung war (was in diesem dumbed down-Beispiel nicht ganz genau ist, aber hoffentlich macht es immer noch Sinn ).

    
Alconja 07.12.2010, 00:46
quelle
2

Dies ist der Bug, von dem ich glaube, dass Sie darauf stoßen, und die Lösung ist viel einfacher:

Ссылка

    
Jason 18.11.2011 18:04
quelle
2

Ich habe die Änderung in sortierbar implementiert, um den Z-Index zu berücksichtigen.

Siehe meine Gabel hier: Ссылка (10 Zeilen Code, ziemlich einfache Änderung)

Sie müssen beim Aufruf von compareZIndex=true die Option sortable hinzufügen.

    
David Antunes 16.05.2014 13:27
quelle
0

Ich habe dieses Problem auf einer Seite kennengelernt, auf der ich eine Liste vertikal über einer zweiten Liste habe. Obwohl der Überlauf auf "Versteckt" gesetzt ist, blockiert der unsichtbare Überlauf der Top-Liste immer noch das Ereignis "Verschieben nach" für die darunter liegende Liste (dies kann bestätigt werden, indem in der oberen Liste der Überlauf auf auto gesetzt wird, um die Überlappung zu visualisieren). Es ist ein Z-Index-Problem.

Mein Problem bestand darin, diesen Code in das sortierbare Stop-Ereignis einzufügen:

%Vor%

Was ich hier mache, ist das explizite Verstecken der obersten Listenelemente, wobei nur die obersten 5 sichtbar bleiben, so dass es zwischen der oberen und unteren Liste keine DOM-Überlappung gibt.

    
zomf 10.05.2012 19:17
quelle