PDA

View Full Version : Drag, drop, sort in Touch



philp
21 Jun 2010, 2:05 AM
Hi,

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?

Phil

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

TommyMaintz
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.

philp
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?

TommyMaintz
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

milton9480
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.
Tks!!

milton9480
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) :(

HTH

maria.parra
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

relson
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.

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

svinchon
12 Jun 2013, 7:07 AM
Hello,

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).

Regards.