'Fancy' drag-and-drop

Posted on 2008-11-15
Medium Priority
Last Modified: 2012-06-21
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.

Question by:AmyL
1 Comment

Accepted Solution

Piotr D earned 2000 total points
ID: 23061722
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.

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question