Drag ListView items from one collapsible to another

Question

I have several collapsibles on the page at once. Each one contains a single SelectList.

What I want to do is drag a SelectList item from one collapsible to another.

I can't seem to find any plugins that do that. There are some plugins that kinda do it, but they take over the touch and click events so that you now need to touch/click on a button to expand. Which is not where I wanna be.

Ideally I'd like the plugin to add an icon to the right of the select list items that responds to the click and touch events for dragging.

Does anyone know where I can find a plugin that would allow me to to it?

Answer 1

I have used the following in the past:

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

Here's a JSFiddle of it in action using something as simple as:

$("#sortable").sortable({
    items: "li:not(.ui-li-divider)"
});
$("#sortable").sortable();
$("#sortable").disableSelection();
$("#sortable").bind("sortstop", function (event, ui) {
    $('#sortable').listview('refresh');
});

Answer 2

I use jquery-ui and touch punch