select, then drag & drop multiple elements

[Aleksander]

Hello,

The web is full of examples of how to implement drag&drop of a single
item in javascript. Almost every js library supports it. But I
haven't seen a single piece of a code that would allow you to 1)
select multiple elements and then 2) drag&drop them within a 2d
space. If you have problems visualizing what I mean just take the
icons of your desktop.

So is there an easy way to do this? If Prototype doesn't simplify
this very much, do you know of any other js library that would
facilitate this?

I would really appreciate your help. This feature is central to a web
app that I intend to build. Its interface will be a big 2d space
(much larger than screen, so scrolling will come to play, as well as
zooming), and in it there will be tens - if not hundreds - of
draggable elements that the user should be able to reposition - also
in groups. The elements themselves could be as simple as a div
containing an image and label (desktop icon comes to mind), or could
contain multiple images, text, js UI elements... Being able to move
many elements at once is very important. I hope this doesn't sound
intimidating.

Thank you,
Aleksander

[david]

Hi Aleksander,

to be honest, I don't know if there is a READY solution for your
problem.
If I had this problem, what came immediately in mind is the following:
1- The user select the differents elements ==> save it all in a
variable (array for exemple)
2- On the start dragg event:
a- just create a container and happend a copy of all selected
element to the container (the tricky part is to be sure that cloned
element are at the same position, but prototype is here :),
b- hide all selected element and
c- drag the container.
rem:You could had some calculation depending of the length of your
element from mouse pointer to calculate a new opacity for the copied
element (that will give you a real desktop icon effect).
3- On stop dragging:
a- recalculate the new position off each element and show them
b- delete the container and all cloned element.


I hope it help you :))

--
David

[Aleksander]

David, thank you for your answer.

I guess to say that there's no "ready" solution is to say the least.
What you've described is more like writing the whole thing from
scratch. ;-) But of course you're right. I guess I was hoping for a
miracle. ;-)

On a side note, I must say I'm quite disappointed with what popular
javascript libraries have to offer in terms of user interfaces.
Everyone does "cool" progress bars, animated un/folding text frames,
rounded corners and very basic drag&drop. But noone is pushing the
boundaries any further. I guess the web 2.0 crowd has rested on
laurels when it comes to interfaces. Maybe if my multi-element
drag&drop script turns out to be any good, I'll publish it
somewhere. ;-)

Anyways, do you know of any really good forums where I could ask
tought questions on javascript? I mean in general, not neccessarily
related to Prototype. ;-) Cuz I'm sure I'll run into some hard
problems...

Thanks,
Aleksander

[david]

Hi aleksander,

As I'm french, I use french JS forum, so I don't think you could be
interressed.
Perhaps in newsgroup !!

--
David

[Jonas Rosenqvist]

Take a peek at deviantart.com (you may need to register to get to "the
good stuff")

They have draggable semi opaque selection rectangles and multiple
draggable objects with dynamic droptarget creation and much more (best
featured in the "edit gallery" function), totaly awesome use of the
technology. I dont remember exactly but I think it's all based on
their own JS framework.

/ Jonas

[Aleksander]

Jonas, thanks a lot for your answer.

Actually I visit deviantart pretty frequently - but I'm a passive user
(I watch other people's work), so I didn't know about that great multi-
element drag&drop interface. Indeed, it is Javascript, but it's
pretty complicated and in the mean time I have already managed to
write my own d&d from scratch. It's very simple but it also does
multiple elements selection and dragging, as well as adding elements
to selection (with Ctrl held down) and substracting elements from
selection (with Alt). So more or less I'm home. I would publish my
code, but it's very sloppy and I'm not very experienced in js, so
other js programmers would probably have a good laugh of me... ;-)

A.