'Fancy' drag-and-drop

I need a creative solution for the following problem:

I have a page with two boxes, one on the left (source box) and one on the right (target box). The boxes are just background images (in order to have rounded corners), but they can be something different if need be. I have a simple text box with a 'search' button, and, on click, a remote procedure call is made returning an xml file (search results). I need the box on the left to populate with the search results (the number returned could vary). I then need these search result items to be "dragable" into the box on the right. I need to be able to capture events for when the items are dragged into the box on the right, and also when they are dragged back to the box on the left.

Then, (this is where it gets tricky for me), I need to be able to run a new search. The items that have been dragged into the target box (on the right) should remain untouched, but the box on the left should completely reset. My main problem is knowing whether the items are inside or outside of the boxes, and also clearing out the search results while leaving the items in the target box intact.

I am hoping this is not super complicated. I came up with a solution that does everything except the reset, but I would love to get a fresh take on the process.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Piotr DCommented:
Hi AmyL,

For such complex functionality I would rather use some Javascript framework. This will save you lots of time spent on making your cross-browser etc. and provide ready mechanisms for what you want to achieve.

I would recommend Backbase framework (www.backbase.com). This framework has all the functionality you need (XML support, Drag&Drop, populating containers with elements, event handlers) and much more (take a look here: http://demo.backbase.com/explorer/ ). If you choose Backbase, I could help you making first steps into it.

I am also sure that other JS frameworks have (maybe more basic, but...) similar functionality ready to use out-of-the-box.

If you still want to use your own code only, please, provide us with some sample code for testing.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.