Sortable list view in jQuery Mobile

Question

Is there a functionality in jQuery Mobile for making listviews sortable?

By sortable, I mean possibility for the user to reorder elements in the list by dragging, like on the iPhone.

Applying jQuery UI sortable effect on the listview makes it sortable on desktop browser, but not on mobile.

Update: I was trying these solutions. Touch Punch makes drag'n'drop functionality to work, but only when the list is not longer then the device screen. If some items are out of the screen (you need to scroll down to see them), then functionality gets broken: when you're dragging an item, it gets the wrong position.

Did you get anywhere with this? I have the exact same problem as mentioned in your update — Jon Wells, Mar 25 '13 at 11:35
It was almost a year ago, I don't remember what I did exactly. I think I just added a buttons to move elements up/down. — AbstractVoid, Mar 26 '13 at 12:07
Thanks for the reply, thats almost exactly what I've resorted to. — Jon Wells, Mar 26 '13 at 12:15
Sure, no problem. Sorry that I couldn't give you a better solution. — AbstractVoid, Mar 26 '13 at 12:17

score 0 · Answer 1 · answered Aug 21 '12 at 03:59

An easy solution is to use jquery ui sortable along with jquery mobile list view, see the code:

<ul data-role="listview" class="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

and make sure you add the jqueryui library to the

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

Then call the sortable function:

<script>
        $(function() {
                $( ".sortable" ).sortable();
                $( ".sortable" ).disableSelection();
        });
</script>

I hope this helps...

This works... Until you see one day all the weird errors of mixing JQuery UI and JQuery Mobile. I strongly DO NOT recommend that! — Erdal G., Aug 21 '14 at 16:51
this doesn't work in IE10 or IE11, however it does work in compatibility mode. — Rudy Hinojosa, Jan 24 '14 at 19:43

Sortable list view in jQuery Mobile

1 Answers1