Multiple drag and drop in JQuery: event after dragging

Question

Hey everyone,

I am actually trying to make a .php page where I am going to have 3 draggable elements which have to be dragged to 3 droppable elements -each draggable to a droppable, and they are unique, so one each droppable will only accept a certain draggable.

The thing is that I need to control that all of the elements have been dragged to the right spot, in which case I should redirect the user for example to success.php, otherwise, if some of the elements were dragged to the wrong droppable, the user have to go to for example failure.php.

Is there anyway for example to save a certain value in a $_SESSION in PHP in order to know that all the draggables have been dropped in the right place?

This is the code for the drag&drop:

$(function() {
    $("#draggableLeiden").draggable();
    $("#draggableTheHague").draggable();
    $("#draggableRotterdam").draggable();

    $("#droppableLeiden").droppable({
        accept: '.imgLeiden',
        drop: function(event, ui) 
        {
            $(this).addClass('ui-state-highlight');

        }
    });
    $("#droppableTheHague").droppable({
        accept: '.imgTheHague',
        drop: function(event, ui) 
        {
            $(this).addClass('ui-state-highlight');

        }
    });
    $("#droppableRotterdam").droppable({
        accept: '.imgRotterdam',
        drop: function() 
        {
            $(this).addClass('ui-state-highlight');
            //var activeClass = $(this).droppable('option', 'activeClass','ui-state-highlight');
        }
    });
});

I am trying to do this for example getting the active class of the droppable elements to see if it matches 'ui-state-highlight', but actually, that tag is gonna be executed everytime the page reloads, so if I try to insert any code into the
drop: function() it will always execute.

Thanks a lot in advance!

Answer 1

Use the revert option instead. When a draggable element is dropped on anything but the accepted droppable element then it will slide back to its original spot. Does this work for you?

Answer 2

Are you by chance looking for ui.draggable it holds the element that was dropped?

http://jqueryui.com/demos/droppable/

$('#target').droppable({
    drop : function(event,ui){
            if($(ui.draggable).attr('id') == "correcttarget")
            {
                    window.location = "yay.php";
            }
            else
            {
                    window.location = "awwww.php";
            }
    }
})