View Full Version : drag and drop re order list

20 Aug 2007, 1:17 PM
I would like to build a reorder list similar to http://www.dhtmlgoodies.com/scripts/arrange-nodes/arrange-nodes-d2.html. Where my users can drag and drop rows according to their order. Can any one help me or show some pointers in how to implement this.

Thanks in advance

20 Aug 2007, 1:28 PM
I usually just use a tree to do it.

20 Aug 2007, 2:19 PM
I want arrange rows in Ext.grid. I have list of data that I display in grid and would like to allow users to arrange them. Is it possible to do with grid?


22 Aug 2007, 5:39 PM
hello evant
I just want to change the order of tree node by drag and drop,my problem is when i drag the node,but then i don't change the position of the node,in my program how can i know it?
can you give me some advice?

22 Aug 2007, 5:46 PM

Troy Wolf
23 Aug 2007, 7:39 AM
I too would like to create a very "simple" drag & drop reorder list similar to the one found at http://www.dhtmlgoodies.com/scripts/arrange-nodes/arrange-nodes-d2.html. Specifically, I'll have 3 strings (probably with a nice-looking surrounding box) vertically stacked and the user needs to be able to reorder them before submitting a form.

I'm new to Ext, but I'm looking at examples and reading the manual. A lot of Drag & Drop seems tied to the Tree object. Do I have to use a tree to create the D&D list I want? And if so, can the tree be formatted to appear as a simple list rather than a tree?

Btw, I see the Community Manual has a lot of empty sections. This Community Manual could be a great place for people to share their knowledge of working with the various Ext objects and simple implementation examples. I want more simple code examples. :) Hopefully as I master some of these objects, I can contribute. Thanks for the great community here!

23 Aug 2007, 7:58 AM
Use this: http://extjs.com/forum/showthread.php?t=9629 It's a native Ext View which allows DnD.

Troy Wolf
23 Aug 2007, 8:19 AM
Animal, I've seen your screenshots and explanations of that code, and it's beautiful, but man that is a lot of code for me to look through for a simple D&D reorder list example. :)

23 Aug 2007, 8:28 AM
It's simple to implement. BernardChhun did it.

It's exactly the same as http://extjs.com/deploy/ext/docs/output/Ext.View.html

Plus a few extra config options:

/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
/** @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
/** @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
/** @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */

So if you just want a sortable list, you'd just add

dragGroup: 'thisViewId',
dropGroup: 'thisViewId'

To your View config and it would be drag-droppable within itself only.

30 Jul 2008, 12:14 AM
Here is a reorder list done using standard Ext DnD components.