3

私は実際に.phpページを作成しようとしています。3つのドラッグ可能な要素を3つのドロップ可能な要素にドラッグする必要があります。それぞれがドロップ可能な要素にドラッグ可能であり、それらは一意であるため、各ドロップ可能な要素は特定のドラッグ可能な要素のみを受け入れます。 。

重要なのは、すべての要素が正しい場所にドラッグされていることを制御する必要があるということです。その場合、たとえばユーザーをsuccess.phpにリダイレクトする必要があります。そうしないと、一部の要素が間違ったドロップ可能オブジェクトにドラッグされた場合、ユーザーは、たとえば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');
        }
    });
});

たとえば、ドロップ可能な要素のアクティブクラスを取得して、「ui-state-highlight」と一致するかどうかを確認しようとしていますが、実際には、ページがリロードされるたびにそのタグが実行されるため、ドロップへのコード
:function()常に実行されます。

よろしくお願いします!

4

2 に答える 2

1

代わりに、元に戻すオプションを使用してください。ドラッグ可能な要素が受け入れられたドロップ可能な要素以外にドロップされると、元の場所にスライドして戻ります。これはあなたのために働きますか?

于 2010-01-24T21:40:29.453 に答える
1

あなたはたまたま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";
            }
    }
})
于 2010-01-30T20:01:18.650 に答える