代码之家 › 专栏 › 技术社区 › noloman amram99

jquery中的多次拖放:拖动后的事件

droppable draggable drag-and-drop jquery javascript

noloman amram99 · 技术社区 · 15 年前

实际上,我正试图创建一个.php页面,在这里我将有3个可拖动的元素,它们必须被拖动到3个可拖动的元素-每个可拖动到一个可拖动的元素,并且它们是唯一的,因此每个可拖动的元素只能接受某个可拖动的元素。

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

例如,有没有在PHP中的一个$\u会话中保存一个特定的值,以便知道所有的draggables都被放到了正确的位置?

这是拖放的代码:

$(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');
        }
    });
});

我正在尝试这样做,例如获取可拖放元素的活动类,以查看它是否与“ui-state-highlight”匹配,但实际上,每次重新加载页面时都会执行该标记,因此如果我尝试将任何代码插入
删除:函数() 它将始终执行。

提前多谢!

2 回复 | 直到 15 年前

Justin Bull 15 年前

使用 revert 而不是选项。当一个可拖动的元素被放到除可接受的可拖放元素之外的任何元素上时,它将滑回其原始位置。这对你有用吗?

Kristoffer Sall-Storgaard ProllyGeek 15 年前

你是偶然在找的吗 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";
            }
    }
})

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前