Question

Right,

I’ve got this code here:

var dfd1 = $.Deferred();
    var dfd2 = $.Deferred();

    $( "#draggable" ).draggable({
        revert: "invalid",
        snap: "#droppable",
        });
    $( "#droppable" ).droppable({
        accept: "#draggable",
        drop: function() {
            $("#whistle").get(0).play();
            dfd1.resolve();
            }
        });
    $( "#draggable2" ).draggable({
        revert: "invalid",
        snap: "#droppable",
        });
    $( "#droppable2" ).droppable({
        accept: "#draggable2",
        drop: function() {
            $("#whistle").get(0).play();
            dfd2.resolve();
            }
        });
    var done = $.when(dfd1.promise(), dfd2.promise())
        done.then(function(){
        $("#whistle2").get(0).play();
        alert ("done!")
        });

And I’ve been trying to add something like this:

if(done.state("#sec_a_div") == "resolved"){
        $("#sec_a_th").css("background-color"="green")
    }
    else {
        $("#sec_a_th").css("background-color"="yellow")
    }

Thing is, there are a couple of sec id’d divs. I wanted to know, maybe someone could explain me, how to make these dfd’s unique to this div and maybe then how to, depending on state, change the color of a thumbnail. I hope I am as clear as I can be.

Answer 1

Ok, I got it working, if anyone is interested.

var done = $.when(dfd1.promise(), dfd2.promise())
    done.then(function(){
    $("#whistle2").get(0).play();
    alert ("done!");
    $("#sec_a_th").css({'background-color' : 'green', 'opacity' : 0.4});
    });
$("#sec_a_th").mousedown(function(){
    $("#sec_a_th").css({'background-color' : 'yellow', 'opacity' : 0.4});
    });