'Fancy' drag-and-drop

Posted on 2008-11-15
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
    LVL 3

    Accepted Solution

    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 ( 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: ). 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

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    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…

    755 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now