5

次のコードを使用すると、ページ上で要素をドラッグアンドドロップでき、ドロップが成功すると、要素のIDを渡すsaveRatingsというメソッドが実行されます。

            $('.draggable').draggable({
                revert: true
            });


            $('.droppable').droppable({
                drop: function( event, ui ) {
                    draggedID = ui.draggable.attr("id");
                    droppedID = $(this).attr("id");
                    Global.showLoader('Saving...');
                    quiz1.saveRatings(draggedID, droppedID);
                }
            });

計画では、ドロップが正常に行われると、ドラッグされたアイテムが削除され、ドロップされた要素からドロップ可能なクラスが削除されて、他の要素もそこにドロップされないようになります。

saveRatings: function ( choiceId, ratingId ) {

                // Hide the dragged choice
                $('div#' + choiceId).hide();

                // Remove droppable behaviour
                $('div#' + ratingId).removeClass('ui-droppable');
                $('div#' + ratingId).removeClass('droppable');
                $('div#' + ratingId).addClass('done');

}

削除部分はクラスの削除と同様に正常に機能しますが、要素から他のクラスをドロップすることはできます...要素からドロップ可能クラスとuiドロップ可能クラスを削除したとしても...

これが機能しない理由はありますか？フルコードベースがかなり大きいため、フィドルを表示することはできません（ただし、これに直接影響することはありません）。ただし、上記の例では、解決策として十分な問題を説明しているはずです。

4

3 に答える 3

19

使用disable：

$('#' + ratingId).droppable('disable')

'div#'また、 IDは一意であるため、IDで選択するときに指定する必要はありません。

デモ（destroyを使用）

于 2012-08-07T16:18:38.787 に答える
9

以下を使用できます。

$('#' + ratingId).droppable('destroy')

これにより、ドロップ可能な動作が要素から完全に削除されます。再初期化する場合は、最初に初期化したときと同じ初期化コードを使用して、要素を再度ドロップ可能にする必要があります。

詳細については、次のドキュメントを参照してください: http://api.jqueryui.com/droppable/#method-destroy

于 2013-02-18T11:10:25.777 に答える
3

受け入れられた回答の解決策はドロップパプルを壊します。つまり、それを無効にしたように見えるだけです。ただし、このようにすると、後で再度有効にすることはできません。documentationによると、要素を壊さずにこれを行う正しい方法は次のとおりです。

//Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
//setter
$( ".selector" ).droppable( "option", "disabled", true );
于 2013-01-29T05:32:32.980 に答える