$(function ()
{
    var zindex = 10,
            dropped = 0,
            drop = function (event, ui) {
                if (ui.draggable.data('value') === $(this).data('value')) {
                    var top = $(this).position().top+($(this).height()-ui.draggable.height())/2;
                    var left = $(this).position().left+($(this).width()-ui.draggable.width())/2;
                    var color = $(this).css('color');
                    dropped++;
                    ui.draggable
                            .draggable({revert: false})
                            .draggable("option", "disabled", true);
                    $('#jplayer_well').jPlayer('play');
                    ui.draggable.animate({
                        top: top,
                        left: left
                    }, 900).css({'color': color, 'text-shadow': 'none'});
                } else {
                    $('#jplayer_wrong').jPlayer('play');
                }
            };

    $(".dragg")
            .draggable({
                start: function () {
                    zindex++;
                    $(this).css('z-index', zindex);
                },
                revert: true,
                revertDuration: 900
            });

    $(".dropp").droppable({
        accept: ".dragg",
        tolerance: "pointer",
        drop: drop
    });

});