jquery - ドロップ時のドラッグ可能なオブジェクトの条件を設定する - Jquery - UI

Question

1 つのページに複数のドラッグ可能な要素があり、複数のドロップ可能なターゲットがあるとします。ドラッグ可能な各要素には、ドロップ可能なターゲットが 1 つだけあります。私の質問は、正しい要素が正しいターゲットにドロップされているかどうかをテストする方法です。フィドルの例を次に示します: http://jsfiddle.net/D25Rt/

これは例のコードです:

$("#draggable-red, #draggable-blue, #draggable-green").draggable({ revert: "invalid", containment: "#content"});

$("#droppable-red").droppable({
    accept: "#draggable-red",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
});

$("#droppable-blue").droppable({
    accept: "#draggable-blue",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
});

$("#droppable-green").droppable({
    accept: "#draggable-green",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
});

より具体的には、前の例に関して、青いボールを赤いボックスの上にドラッグすると、青いボールを離したときにアラート（「間違ったボックス...」のようなもの）を表示したいと思います。私はjQuery UIを初めて使用します。どこでどのようにすればよいかについて、誰かがヒントをくれますか? 受け入れオプションまたはドロップオプションで？