I need to make a list that can be rearranged using drag and drop in a Sencha Touch 1.0 app. So what I did so far is to create a panel with the items list made out of alternating draggable and droppable panels. I can drag an item to a new position and I can get figure out where I need to insert it, but the problem is I can't figure out how to actually move the item within the panel.

I tried to remove the item and insert it in the new location, but it's a bit slow and it stopped working once I changed the eventTarget on the Draggable object to point to a child of the item(the handle of the item that you have to use in order to drag it around).

Code:
var paragraphText = p.el.dom.outerText;
paragraphPanel.remove(paragraph, true);
paragraphPanel.insert(dropIndex, createParagraph(paragraphText));
paragraphPanel.doLayout();


I also tried not destroying the item and just removing it and inserting it right back in the new possition. This doesn't work at all, as in the drag is reset and nothing happens in the list, even though the code below gets executed.

Code:
paragraphPanel.remove(paragraph, false);
paragraphPanel.insert(dropIndex, paragraph);
paragraphPanel.doLayout();
Any suggestions would be appreciated.