Question

我实际上是想创建一个.php页面，我将要有3个可拖动的元素，必须拖动到3个可放置的元素 - 每个可拖放到droppable，它们是唯一的，所以每个droppable只接受某个可拖得的。

问题是我需要控制所有元素都被拖到正确的位置，在这种情况下我应该将用户重定向到例如success.php，否则，如果某些元素被拖动到错误的droppable，用户必须转到例如failure.php。

有没有例如在PHP中的$ _SESSION中保存某个值，以便知道所有可拖动的东西都被丢弃在正确的位置？

这是拖放的代码：

$(function() {
    $("#draggableLeiden").draggable();
    $("#draggableTheHague").draggable();
    $("#draggableRotterdam").draggable();

    $("#droppableLeiden").droppable({
        accept: '.imgLeiden',
        drop: function(event, ui) 
        {
            $(this).addClass('ui-state-highlight');

        }
    });
    $("#droppableTheHague").droppable({
        accept: '.imgTheHague',
        drop: function(event, ui) 
        {
            $(this).addClass('ui-state-highlight');

        }
    });
    $("#droppableRotterdam").droppable({
        accept: '.imgRotterdam',
        drop: function() 
        {
            $(this).addClass('ui-state-highlight');
            //var activeClass = $(this).droppable('option', 'activeClass','ui-state-highlight');
        }
    });
});

我正在尝试这样做，例如获取droppable元素的活动类以查看它是否与'ui-state-highlight'匹配，但实际上，每次页面重新加载时都会执行该标记，所以如果我尝试将任何代码插入到 drop：function（）它将永远执行。

提前多多感谢！

Answer 1

请改用revert选项。当可拖动元素被放置在除了接受的可放置元素之外的任何东西上时，它将滑回到其原始位置。这对你有用吗？

Answer 2

您是否偶然寻找ui.draggable它保留了被删除的元素？

http://jqueryui.com/demos/droppable/

$('#target').droppable({
    drop : function(event,ui){
            if($(ui.draggable).attr('id') == "correcttarget")
            {
                    window.location = "yay.php";
            }
            else
            {
                    window.location = "awwww.php";
            }
    }
})

拖放后的JQuery：事件中的多次拖放

2 个答案: