拖放后将访问者发送到新页面

时间:2013-11-30 03:08:37

标签: javascript jquery css jquery-ui

我想在将三个硬币拖入三个不同的罐子后将访客发送到新页面,但我不确定在将硬币拖入罐子后如何触发新页面。 我希望这样的东西能起作用: http://jsfiddle.net/F8L44/

$(init);
function init() {
    $('#makeMeDraggable1').draggable();
    $('#makeMeDroppable1').droppable({
        drop: function () {
            $("#makeMeDraggable1").draggable("option", "containment", "#makeMeDroppable1");
        }
    });
    $('#makeMeDraggable2').draggable();
    $('#makeMeDroppable2').droppable({
        drop: function () {
            $("#makeMeDraggable2").draggable("option", "containment", "#makeMeDroppable2");
        }
    });
    $('#makeMeDraggable3').draggable();
    $('#makeMeDroppable3').droppable({
        drop: function () {
            $("#makeMeDraggable3").draggable("option", "containment", "#makeMeDroppable3");
        }
    });
}

1 个答案:

答案 0 :(得分:1)

$(init);

function init () {
    var drops = 0,
        redirectIfDone = function () {
            if (drops === 3) {
                window.location = 'http://www.google.com';
            }
        };

    $('#makeMeDraggable1').draggable();
    $('#makeMeDroppable1').droppable({
        drop: function () {
            drops++;
            redirectIfDone();
            $("#makeMeDraggable1").draggable("option", "containment", "#makeMeDroppable1");
        }
    });
    $('#makeMeDraggable2').draggable();
    $('#makeMeDroppable2').droppable({
        drop: function () {
            drops++;
            redirectIfDone();
            $("#makeMeDraggable2").draggable("option", "containment", "#makeMeDroppable2");
        }
    });
    $('#makeMeDraggable3').draggable();
    $('#makeMeDroppable3').droppable({
        drop: function () {
            drops++;
            redirectIfDone();
            $("#makeMeDraggable3").draggable("option", "containment", "#makeMeDroppable3");
        }
    });
}