Touch-drag to re-order lists

[dlaidlaw]

It would be very nice to be able to touch and drag a list item to reorder the list. An event would be needed to detect/react to the reordering. This would enable a UI situation where a user can reorder items in situations where their order is a primary concern. For example, in a workflow.

[toddparker]

Yep, drag and drop re-ordering is on our radar. It may not land for 1.0, but we'll see.

[PHANTOMIAS]

And what's about dragging elements on the page instead of scrolling the whole page?

[toddparker]

Good idea but moving to the feature requests page for post-1.0: https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[forresst]

Here's a tip until a new feature. This could perhaps help you or inspire you for future functionality. This works on Android 4.0, Android Browser. I did not test on other devices.

http://forresst.github.com/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/

[urbien]

I do not see a touch-drag re-order, in current 1.3.2 release. Am I missing something? Is there a plan to add re-order to ListView?

[arschmitz]

@urbien no this has not been implemented however it can be done pretty easily using jquery ui sortable and jquery touch punch note that it is 75% width this is because other wise you prevent your user from being able to scroll this even updates the autodividers in the list http://jsbin.com/ofuhaw/160

The 2 lines of js in this allow you to make any listview sortable by adding data-sortable="true" to any listview and calls the refresh method after each update to ensure any dividers are properly updated. any string options on sortable can also be specified in the same way as jquery mobile options by doing data-[optionname]="optionvalue" on the element

[urbien]

@arschmitz thank you for your solution and an explanation how it works. The demo seems to work well. I have also found this solution, also using jq-ui. The drawback of course is the size of jquery-ui and possibility of side affects as it starts clashing with jqm. Starting with 1.4, jqm and jq-ui are getting to become more aligned, so may be this concern will go away.

[arschmitz]

@urbien my solution is using jquery ui its just only using the files you need because jquery mobile already include the jquery ui widget factory and jquery ui core you will never want to use the full builds of both libraries together

[arschmitz]

also note new jquery mobile tabs are jquery ui tabs just dropped in in this same fashion. This is the new recomended way to use other widgets with jquery mobile the only reason the init selector needs to be set is it defaults to data-role="widgetname" but because with listviews you already set the data-role on the list to listview we cant use role so i changed it to data-sortable="true" and the second line is just to make it work with autodividers if you dont care about autodividers you can exclude this

[urbien]

thanks so much @arschmitz! We will give it a try and let you know how it worked. We will be using it initially for an app tour capability, for apps built on our framework, specifically to re-order the steps in a tour. But it could also be used to order parts of a lesson plan, for playlists, etc.