6

For reference, this is Apple's original: Apple's reference list interface


I would like to create a webapp that has a re-orderable list widget for mobile and desktop devices alike. Basically, I want to re-create the Reorderable List widget from Enyo:

http://enyojs.com/sampler/latest/ (Navigate to Layout->List->Swipeable-Reorderable list)

…but without the overhead of a giant framework. These are the required features:

  • Start reordering on tap and hold
  • List items rearrange as you drag the row
  • List starts scrolling when item is dragged towards the top/bottom
    and stops scrolling as you move towards the center
  • Works with touch devices and mouse
  • Allows scrolling in list with flick gesture, scrollbars (if present) and mouse wheel
  • lightweight (<100k)

I tried to plug jQuery UI's sortable into jQuery Mobile, but that leaves me with no autoscrolling. Same goes for a library called Slip

So I am looking for a library that satisfies

  • either all of the above
  • or just the third point, and integrates nicely with jQuery UI/Mobile, or Slip

Bonus points for data binding.

1

RubaXa/Sortable

Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists.

It has support for Angular (data binding!), works without jQuery (but has support). The list scrolls when an item is dragged to its edge.

I'm not certain about the flick gestures, but they should work fine on a mobile device considering it's just a <ul> with <li>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.