iPhone-ähnliches sortierbares Listen-Widget für HTML

Als Referenz ist dies das Original von Apple:Schnittstelle für die Referenzliste von Apple


Ich möchte eine Webapp erstellen, die ein nachbestellbares Listen-Widget für mobile und Desktop-Geräte gleichermaßen enthält. Grundsätzlich möchte ich das Reorderable List-Widget von Enyo neu erstellen:

http://enyojs.com/sampler/latest/ (Navigieren Sie zu Layout->List->Swipeable-Reorderable list)

…aber ohne den Overhead eines riesigen Frameworks. Dies sind die erforderlichen Funktionen:

  • Starten Sie die Neuordnung durch Antippen und Halten
  • Listenelemente werden beim Ziehen der Zeile neu angeordnet
  • Die Liste beginnt zu scrollen, wenn das Element nach oben/unten gezogen wird,
    und hört auf zu scrollen, wenn Sie sich zur Mitte bewegen
  • Funktioniert mit Touch-Geräten und Maus
  • Ermöglicht das Scrollen in der Liste mit Wischgesten, Bildlaufleisten (falls vorhanden) und Mausrad
  • leicht (<100k)

Ich habe versucht, jQuery-UIs sortablein jQuery Mobile einzufügen , aber das lässt mich ohne Autoscrolling zurück. Gleiches gilt für eine Bibliothek namens Slip

Also suche ich nach einer Bibliothek, die mich zufrieden stellt

  • entweder alle der oben genannten
  • oder nur der dritte Punkt, und lässt sich gut in jQuery UI/Mobile oder Slip integrieren

Bonuspunkte für die Datenbindung.

Antworten (1)

RubaXa/sortierbar

Sortable ist eine minimalistische JavaScript-Bibliothek für umsortierbare Drag-and-Drop-Listen.

Es unterstützt Angular (Datenbindung!), funktioniert ohne jQuery (hat aber Unterstützung). Die Liste scrollt, wenn ein Element an seinen Rand gezogen wird.

Ich bin mir bei den Flick-Gesten nicht sicher, aber sie sollten auf einem mobilen Gerät gut funktionieren, wenn man bedenkt, dass es nur ein <ul>With ist<li>