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?
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 ).
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.
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.
Tags und Links javascript jquery fixed drag-and-drop jquery-ui-sortable