PDA

View Full Version : How to select and drag multiple Components\divs



BlueSkye
17 Jun 2010, 7:15 AM
Hi,
I was looking for something in ExtJS that could help me doing the thing that follows.

I need the user to select 1 or more div/components , and then drag them all by just dragging one of them. Just like they were folders in a desktop (I don't need to drag them from one component to another, or something like that! I just need to drag them inside a panel, as if they were folders!)
So, I need to select one or more <div>s, maybe through a rectangle drawn by the mouse pointer, and then drag all the selected ones by dragging just one of them. The same as desktop.

I need to:
1) a way to "select" them somehow, (is there any Ext class that manages keypression in the whole browser? like "shift",..)
2) drag all the selected ones

(3). And just one another thing: is there any "specific name" for the rectangle that the mouse draws on the desktop when you try to select something? I couldn't find any reference for the web-version of this thing...

Any idea of the Ext classes or javascript functions I should look for?
I was just looking for a direction...

Thanks!:)

Animal
17 Jun 2010, 7:23 AM
Your examples directory has an example of selecting with the mouse

http://www.sencha.com/deploy/dev/examples/view/data-view.html

You'll need a bit more programming experience I suspect.

BlueSkye
17 Jun 2010, 7:37 AM
Your examples directory has an example of selecting with the mouse

http://www.sencha.com/deploy/dev/examples/view/data-view.html

You'll need a bit more programming experience I suspect.

Thanks for the example! That's quite near to what I was looking for!
But is this selection only provived with the dataView component, in ExtJS?
It's just a minor\extra functionality in my application, so I can make it with just plain javascript rather than Ext, but... Has the drawn rectangle a specific name? Or even the multiple selection... So maybe I can google on it. (It just keeps coming out multi-selection on comboboxes!)

And, apart from the selection issue, is there any of the Ext.dd.* classes that can do what I need?

Animal
17 Jun 2010, 7:41 AM
I don't think you are going to be able to do this...

BlueSkye
17 Jun 2010, 7:52 AM
I don't think you are going to be able to do this...

Encouraging... ^^"
I know I'm a beginner... Maybe I don't need to achieve the exact result that I explained.
I was just looking for some tools\info to do what I had in mind, and also to understand if can do it or not... also to "redefine" my targets.

Is it really that complex to drag together a group of selected element? Isn't there an Ext.dd.* class that manages, at least, the dragging of a group of elements together?

mamiano
9 Sep 2010, 7:50 AM
Bumping this because I recently ran aground trying to do something related. The thing that really stumped me was that between the older ExtJS and newer beta Sencha Touch, examples abound but are very conflicting in their approaches as well as being overly complex or simply not working.

The approach I wanted to take was to instantiate a container, place it below the first selected object, and grow it to accept each newly selected object, using the container methods to add objects as they were touched. However, I think now it wouldn't have worked for my purposes anyway -- the entire container would probably have to be draggable to drag the set of selected objects, and that would not be intuitive (since for my purpose the container would be invisible).

Perhaps we're trying to apply Sencha Touch to the wrong sort of application. In my case it was a simple game of dragging fruits and dropping them into a basket, not the sort of corporate data forms and reports that is often in the forefront of ExtJS demos. It just seems common enough that it aught to be easy to do.

mamiano
9 Sep 2010, 8:08 AM
BTW, one name is "rubber band" or "rubberband" selection rectangle.