25

受け入れ状態で関数を作成する方法と、受け入れるものと受け入れないものをどのように見つけるかを誰かに教えてもらえますか。たとえば、受け入れdiv aてdiv b受け入れ状態にしたい。関数を介して I を記述するにはどうすればよいですか?

4

8 に答える 8

50

ドロップ可能な要素が要素の選択を受け入れるようにしたい場合は、次のようにすることができます。

$(".droppable").droppable({
    accept: function(d) { 
        if(d.hasClass("foo")||(d.attr("id")=="bar")){ 
            return true;
        }
    }
});

このドロップ可能オブジェクトは、クラス「foo」の要素またはID「bar」の要素を受け入れます

于 2010-05-23T00:57:32.637 に答える
13

あなたの質問を正しく理解できれば、カスタム コードに基づいてドロップされた要素を条件付きで受け入れたいと考えています。Aberon の答えは典型的なケースです。クラスに基づいて特定のドラッグ可能なオプションのみをドロップできるようにすると、他のすべてのオプションが元に戻ります。それがあなたの質問に答えるなら、大丈夫です。

ただし、クラスの一致よりも複雑なものに基づいて、条件付きで元に戻すアニメーションを発生させる場合があります。私自身のプロジェクトでは、ドラッグ アンド ドロップを使用してユーザーをグループに追加しています。削除されたユーザーが既にグループに属している場合は、ユーザー ヘルパー要素を元に戻したいと思います。それ以外の場合は、AJAX アクションを使用してそれらを挿入します。これはバックエンド チェックに代わるものではありませんが、優れた視覚的フィードバックです。

これに対する簡単な答えを他の場所で探しました。JQuery メンテナーへの注意: 私にとって最も簡単な方法は、次のように、ドロップ関数のイベント オブジェクトにプロパティを追加することです。

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            // add child here
        } else {
            event.revert = true;
        }
    }
});

悲しいことに、それはうまくいきません。ただし、「機能」するものは次のとおりです。ドラッグ可能な要素を常に元に戻すように設定し、条件が満たされた場合はヘルパーを非表示にします。クラス「.ui-draggable-dragging」を持つページ上の唯一の要素を探すことで、ヘルパーへの参照を取得できます。以下に例を示します。「isDropOK()」を独自のロジックに置き換えます。

$('.valid').draggable({
    revert: true,
    helper: 'clone',
    opacity: 0.5
});

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            $('.ui-draggable-dragging').hide();
            // add child here
        }
    }
});

つまり、ドロップ イベントに介入して手動でヘルパーを非表示にしない限り、すべての要素は常に元に戻ります。元に戻すアニメーションは引き続き発生しますが、ユーザーには表示されません。少しハックですが、最終結果は問題なく動作するようです。

于 2009-10-08T19:33:34.563 に答える
9

セレクターに関するJqueryのドキュメントによると。

セレクターに一致するすべてのドラッグ可能オブジェクトが受け入れられます。関数が指定されている場合、カスタムフィルターを提供するために、ページ上のドラッグ可能なオブジェクトごとに関数が呼び出されます（関数の最初の引数として渡されます）。ドラッグ可能を受け入れる必要がある場合、関数はtrueを返す必要があります。

したがって、

$('.selector').droppable({ accept: '.special' });

彼らの例では、クラス'special'がある場合にのみ、何かがドロップされたかのように動作します。任意のJqueryセレクターを受け入れることができるようです。

于 2009-09-18T13:24:32.793 に答える
3

これは私が使用するソリューションです：

... accept: '#diva,#divb', ...
于 2011-02-10T19:47:38.810 に答える
3

別のドラッグ可能オブジェクトによって既に占有されているドロップ可能オブジェクトにドラッグ可能オブジェクトを配置してはならないという条件に基づいて機能するソリューションを見つけました。

$(".placement").droppable({
    accept: function(elm) {
        // only allow draggables to the placement if there's no other draggable 
        // in the droppable
        if (!$(this).attr('isbusy'))
            return true;
    },
    drop: function(event, ui) {
        $(this).attr('isbusy', 'yeap'); // fill key with something

        var draggable = $(ui.draggable[0]);
        // free the draggable's previous droppable 
        if (draggable.attr('droppable')) {
            $('#' + draggable.attr('droppable')).attr('isbusy', '');
        }

        // save the new draggable's droppable
        draggable.attr('droppable', $(this).attr('id'));
    },
});
于 2011-08-17T14:48:41.817 に答える
1

クラスをacceptとして使用する代わりに、次のような関数を使用して、基準に一致する場合にtrueを返すことができます

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});
于 2010-05-20T07:46:25.860 に答える
0

これが私の解決策です：

var foo = true;

$( ".draggable" ).draggable({ 
                        revert: function(){if(foo == true){return true;}else{foo = true;}},
                         });

    $("#droppable").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            if($this == $that){
                foo = true;
                alert("this will revert the draggable back to original position");
            }else{
                foo = false;
                alert("this will NOT revert the draggable back to original position");
            }
        }
    });
于 2010-12-16T18:48:36.653 に答える