Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Touch-drag to re-order lists #271

Closed
dlaidlaw opened this issue Oct 21, 2010 · 10 comments
Closed

Touch-drag to re-order lists #271

dlaidlaw opened this issue Oct 21, 2010 · 10 comments

Comments

@dlaidlaw
Copy link

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
Copy link
Contributor

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

@PHANTOMIAS
Copy link

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

@toddparker
Copy link
Contributor

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

@forresst
Copy link

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
Copy link

urbien commented Aug 9, 2013

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
Copy link
Contributor

@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
Copy link

urbien commented Aug 9, 2013

@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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link

urbien commented Aug 10, 2013

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.

This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants