View Full Version : Drag, drop, sort in Touch

21 Jun 2010, 2:05 AM

I'm ok at PHP, but something of a newbie/example adapter when it comes to js and Ajax.

A while back I developed a standard web application using PHP, Prototype & Scriptaculous whereby a user could drag an item from list 1 and drop to list 2, and could also drag to resequence multiple items within list 2. Items could also be returned to list 1, with list 2 automatically re-indexing to compensate for the removed item. I used crude Ajax with PHP to keep a MySQL db in sync with the relative positions/sequence of the items.

The app lends itself to a mobile/tablet format, so I'd really like to try out converting or re-developing using Sencha Touch. Is this combination of drag, drop & sort (& Ajax) possible?


29 Jun 2010, 1:56 PM
Interested in this too.

29 Jun 2010, 2:28 PM
Although it is definitely possible, just look at the drag and drop complexity of our Solitaire demo, currently it will require quite a bit of custom code. Drag / drop / sortable is still young in Sencha Touch. We are planning on creating an example that does exactly what you are asking for very soon though. And by doing so we will be able to stabilize the code.

30 Jun 2010, 11:45 PM
Thanks Tommy - I'll hold off and wait for the example. Will it be added to the current list of downloadable examples available from your website?

1 Jul 2010, 11:58 AM
Yes, it would be part of the examples.

Di Peng
16 Sep 2011, 6:43 AM
Can't wait for the drag and drop to stabilize in Sencha touch!! I will need that functionality in my company product as well

12 Oct 2011, 3:06 AM
Hi guys I'd like to know if the feature was released or not, and how could be the best way to do something similar until the functionality be released.

12 Oct 2011, 5:41 AM
After some research and samples navigation, I've found a solution. Add the following to your list:

this.myList.on('afterrender', function(el) {
new Ext.util.Sortable('myListId', {
itemSelector: 'div.x-list-item ',
direction: 'vertical',
scroll: true,
constrain: true

Now I just to check that the list also scrolls while not sorting, or do something to alternate behavior ("Enable sort" toggle button) :(


24 Nov 2011, 7:49 AM
Hi all,
I have several items Ext.util.Draggable on my page that work perfectly.
My question is how do I get any of them may be dropped over another
draggable element?
Thx a lot

28 Feb 2012, 4:50 PM
A good trick is disable draggin when sort and disable sort when scrool. You can do this calling disable and enable methods from yourList.scroller and yourReferenceOfSortable.

I'll used like this and work well, using a segmentedbutton.

28 Feb 2012, 4:53 PM
@maria.paarra, what happens when you set the property constraint as false from your Sortable?

12 Jun 2013, 7:07 AM

Has anybody been able to find a good example for that?

I am exactly looking for the same: an example showing how to drag and drop items from list 1 to list 2 and to reorder items in list 2.

This is for a mobile app (currently iPad).