jquery sortierbar und in der Größe veränderbar mit überlappenden Listenelementen

8

Ich habe mehrere sortierbare Listen nebeneinander. Sie können die Breite der divs ändern, um andere Listen abzudecken. Dadurch kann ein Element Teil mehrerer Listen sein.

Ich möchte dies tun, ohne dass sich die sortierbaren divs überlappen.

Siehe die Geige in Ссылка

EDIT: Wenn du zur Geige oben gehst und die Breite eines sortierbaren Gegenstandes vergrößerst, dann bewege ihn herum und lass ihn fallen. Sie werden sehen, dass es andere sortierbare Elemente überlappt. Ich möchte, dass alle sortierbaren Elemente so angeordnet werden, dass es keine Überschneidungen gibt.

BEARBEITEN: Ich habe schonmal mit überlappenden jQuery sortierbaren Listen gearbeitet Wie von @KateA vorgeschlagen, und obwohl es ähnlich ist, spricht es über die überlappenden Listen und nicht über die sortierbaren Elemente, die mehrere Listen abdecken.

BEARBEITEN: In dem fertigen Produkt wird es 7 Listen nebeneinander geben, und ich muss die Sortierung in einer bestimmten Reihenfolge neu anordnen, nachdem der Benutzer ein Element fallen gelassen hat. Ich weiß, dass Sie dem sort: event eine Funktion hinzufügen können, vielleicht ist das die Schlüsselfunktion, um überlappende sortierbare Elemente neu anzuordnen und zu überprüfen / zu korrigieren?

BEARBEITEN: Ich habe auch bemerkt, dass sich das sortierbare Objekt beim Ziehen unterschiedlich verhält, je nachdem ob Sie die Größe mit dem linken oder rechten Griff geändert haben. Es wird verwirrt, über welche Liste du schwebst. z.B. Wenn Sie die Größe mit dem linken Ziehpunkt ändern und ihn aufheben und versuchen, ihn auf die mittlere oder rechte Liste zu setzen, wird er auf die nächste Liste links neben dem Mauszeiger und nicht auf einen leeren Platzhalter unter der Maus gesetzt Zeiger.

EDIT: Der jQuery fullCalendar macht genau das, was ich brauche, aber wie haben sie das gemacht? Ссылка

EDIT: Ich habe daran gearbeitet, die Fidel so weit zu erweitern, wie ich meine sortierbaren Kenntnisse habe. Glaubst du, ich bin auf dem richtigen Weg? Ссылка

    
PaulMrG 09.04.2012, 14:18
quelle

2 Antworten

3

fullcalendar scheint ein visuelles Raster auf dem Hintergrund zu haben, mit den sortierbaren Elementen oben in einem virtuellen Raster, so dass sie höchstwahrscheinlich ihre Positionen manuell berechnen.

Die Art, wie jQueryUI die Sortierung durchführt, besteht darin, der Liste einen Platzhalter hinzuzufügen, der natürlich (Seitenfluss) den Platz für die Ablage anzeigt. Ich würde vorschlagen, es nicht so zu machen, ich denke nicht, dass es eine Möglichkeit gibt, sauber hacken jQueryUI zu haben, um das Verhalten zu haben, nach dem Sie suchen.

Ich würde vorschlagen, dass Sie dasselbe tun wie der Vollkalender, verwenden Sie die ziehbaren und größenverstellbaren Plugins und verschieben Sie die Elemente mit der absoluten Position, wenn sie sich überlappen mit anderen Gegenständen.

Setzen Sie die Fangfunktion nicht auf die ziehbare, sondern basierend auf der Position der ziehbaren, berechnen Sie die Kollisionen und entscheiden Sie, wie Sie mit ihnen umgehen, indem Sie sie entweder nach oben oder nach unten bewegen.

    
guzart 18.04.2012 07:26
quelle
2

Es gibt ein paar Probleme mit dem, was Sie versuchen, aber es ist mir gelungen, ein Beispiel zu erstellen, das einige davon behebt. Das Problem ist, dass diese zwei Jquery UI-Plugins (sortierbar, in der Größe veränderbar) nicht alle Features unterstützen, die Sie wollen, also mindestens eines, wenn nicht beide neu geschrieben oder von Grund auf neu implementiert werden müssen. Einige Probleme beinhalten:

  1. Der West-Handle bewirkt, dass die Breite zunimmt und die css-Eigenschaft "left" abnimmt, was zu Problemen mit Listenelementen auf der linken Seite führt. Das gleiche Problem existiert mit Osten und auf der rechten Seite.
  2. Wenn die Listenelemente "relativ" oder "absolut" positioniert sind, nehmen sie im Seitenfluss keinen Platz ein, daher die Überlappung.
  3. Wenn Sie drei separate divs haben, bedeutet dies, dass jedes Element nur Mitglied einer Liste sein kann und Sie die Breite überprüfen müssen, um zu sehen, ob es auch andere Spalten belegt. Es ist ein wenig unordentlich.

Oben auf dem Beispiel, das ich zur Verfügung gestellt habe, glaube ich, dass Sie ein Datenmodell programmatisch behalten müssen, das jedes Element und die Spalten, in denen es vorhanden ist, verfolgt und es ermöglicht, Korrekturen in der Anzeige nach Bedarf vorzunehmen.

Ich habe festgestellt, dass dies alles etwas ist, was damit zusammenhängt, dass wir eine Woche repräsentieren und Dinge, die in diesem Zeitrahmen vor sich gehen. Während ich denke, dass ich die Hauptfragen Ihrer Frage angesprochen habe, finde ich dieses Problem unterhaltsam und wenn Sie mehr Kontext bereitstellen, wäre ich bereit, mit dem Endprodukt zu helfen.

    
Billy 14.04.2012 17:30
quelle