Drag and Drop question (I searched, I swear)

[vhogarth]

Hey guys,

Im looking to implement a Drag and drop UI. The setup is a list of images displayed that are draggable. Then there is a large rectangular box that the images can be placed, they can only be dropped in the rectangular box, otherwise they stay displayed outside of it. Once the image is in the rectangular box, it can move freely within the confines of the box itself. After all images, or just a couple, have been placed in the box. You can save the page and that writes the data to the DB.

So here are the main questions.

1.) Is there a toolbox that has all these sorts of functions built in i.e (YUI, walterzorns library (good stuff there)

2.) Once i have all the images dropped into the rectangular box, how do i find the coordinates of its location, relative to the box itself and not the window.

3.) How would I append the coordinate info into a form field to pass the data to the server. Would using hidden elements with the name of the images and then applying the value of the coordinates to its value field? IT seems most logical that way.

I think those are the top 3 things i'd like to get a handle around so i can start playing around with it. Any tips, ideas, alternate solutions that are easier would be greatly appreciated.

Im fairly new to Javascript, I have a good grasp in PHP so the form stuff is cake. ITs all the user interaction and DOM manipulation that im still clutzy at.

[adrained]

1) Yes. There's plenty, YUI, Scriptalicious, Dojo

2) would depend on the library you end up using. Any of the libraries should have a method to get the coords of the images within the box.

3) ditto. Except here you would probably need to create your own mechanism. An approach would be to have a JS object that is the coordinator, and the ondragend event would give it a message with the coordinates. I don't know enough offhand about any of the libraries to tell you exactly how that would be done though.

[vhogarth]

Originally Posted by adrained

1) Yes. There's plenty, YUI, Scriptalicious, Dojo

2) would depend on the library you end up using. Any of the libraries should have a method to get the coords of the images within the box.

3) ditto. Except here you would probably need to create your own mechanism. An approach would be to have a JS object that is the coordinator, and the ondragend event would give it a message with the coordinates. I don't know enough offhand about any of the libraries to tell you exactly how that would be done though.

thanks for the tips.. i guess its just a matter of me getting my hands dirty and coming back here with more specifics instead of general theory help.