Question

I tweaked this script that I used from JqueryUi and I have a problem. Both div´s start at the same time. I want each ball to start animate only after is dragged over the special zone.

Question: How can I make them animate one at the time and open the page I am interested after they are doing their animation? Each ball with her properties.

The JavaScript code i am using:

$(document).ready(function(){
    $(function() {
        $("#ball").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $("#ball2").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $( "#dropable" ).droppable({
            drop: function( event, ui ) {
                $("#ball").animate({left: '490px', top: '300px'}, 900);
                setTimeout(function() {window.location.href = "contact.html"}, 900);
                $("#ball2").animate({left: '490px', top: '300px'}, 900);
                setTimeout(function() {window.location.href = "pictori.html"}, 900);
            $( this )
                .find( "p" )
                    .html( "Ai nimerit" );
        }
    }); 
});

});

The HTML:

<div id="ball" class="ui-widget-content"></div>
<div id="ball2" class="ui-widget-content"></div>
<div id="dropable" class="ui-widget-header">
<p>Drop me here</p>

The CSS:

#ball {
position: absolute;
left: 183px;
top: 467px;
width: 42px;
height: 40px;
display: block;
background: url(../Images/ball.png) no-repeat;
background-position: top left;
z-index: 1002;
}
#ball2 {
    position: absolute;
    left: 225px;
    top: 460px;
    width: 42px;
    height: 40px;
    display: block;
    background: url(../../Web4/Images/ball2.png) no-repeat;
    background-position: top left;
    z-index: 1001;
}

Answer 1

To get the element that was dragged you can get use the ui.draggable inside the droppable-drop parameters.

JsFiddle demo: http://jsfiddle.net/JCNAE/

The code:

$(document).ready(function(){
    $(function() {
        $("#ball").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $("#ball2").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $( "#dropable" ).droppable({
            drop: function( event, ui ) {
     //           alert(ui);
                $(ui.draggable).animate({left: '490px', top: '300px'}, 900,
                                        function(){ //finish animation callback
                                            var url = $(this).attr("data-url");
                                            $("#url").text(url); //navigate here, used a div for testing purposes
                                                  }
                 );              
            $( this ).find( "p" ).html( "Ai nimerit" );
        }
    });
});
});

Also as a side note, instead of using a separate timeout to navigate to a url, you can use a callback for when the animate finishes, that is also implemented in the demo above. To be able to assign a url to each div, I assigned a data-url attribute, that can be obtained in the callback.