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.