JQuery drag and Drop

Question

I wish to create an Interface to choose Multiple answers using Drag & Drop rather than CheckBox near to the answers. User can choose two types of answers (Real Answer and a Fake Answer). The User has Two Images (for Real & Fake) on the answer page. User can drag an Image and drop near to the selected answer. It is possible to change the selection by moving the "image and drop over some other answer".

I have used a "div formatted with an image" near to all answers, so user can drop the image (ie fake or real image) over this "div".

I have used JQuery to move the "image" and drop over the "div". Now I need add the code to the "div" (ie container used to hold the image) to identify which "image is placed over it" ie either "fake or real".

Answer 1

Right now, your code makes #move1 and #move2 draggable, but nothing droppable. Try this:

$(document).ready(function(){
    $('#move1').draggable();
    $('#move2').draggable();
    $('form div').droppable({
        drop: function(e, ui) {
            alert(ui.draggable[0].id + ' dropped on ' + this.id);
            //example alert: "move1 dropped on name2"
        }
    });
});