2

複数のドラッグ アンド ドロップ (jquery-ui) があります。区切られた div で。ドラッグ可能をドラッグしてドロップ可能の外にドロップし、もう一度ドラッグしてドロップ可能にドロップすると、一度にドロップした場合にのみフィードバック(テキストやアラートなど)が表示されません。ドロップ領域にスナップし続けます。

 $(function() {
    $( "#eeneen.drag" ).draggable({ snap: ".drop1", snapMode: "inner"});
    $( ".drop1" ).droppable({
        accept: "#eeneen.drag",
        drop: function( event, ui ) {
            $( this )
            .addClass("goed")
                .find( "p" )
                    .html( "Correct" );
                    alert ("correct");

        }
    });
}); 

これは、ドラッグ アンド ドロップごとに繰り返されます。何らかの理由で、最後の関数の視覚的なフィードバックしか得られないため、複数のドロップ クラスを作成しました。

編集: .addClass と .find がなくても同じ問題があります。

何か案は?

最終編集。すべてが機能します。

  $(function() {
    $( "#eendrie.drag" ).draggable({ snap: ".drop3", snapMode: "inner"});
    $( ".drop3" ).droppable({
        accept: "#eendrie.drag",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $( this )

                .find( "p" )
                   $("#goed").toggle().hide(2000); 

        }
    });
});

そのため、ドロップが成功した後に表示および非表示になる追加の div があります。

また、.drag.ui-draggable の高さと幅も定義しました。それができたと思います。

4

0 に答える 0