web-dev-qa-db-ja.com

jqueryドロップ可能受け入れ

受け入れ条件で関数をどのように書くことができるのか、そして何を受け入れるべきか、何を受け入れないかをどのようにして知ることができるのか誰にも教えてもらえますか？たとえば、div aおよびdiv bは受け入れ条件にあります。関数を使用してどのように私を書くことができますか？

javascriptjquerydroppable
23
Nishima

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

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

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

48
Alex

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

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

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

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

つまり、要約すると、dropイベントに介入してヘルパーを手動で非表示にしない限り、すべての要素は常に元に戻ります。元に戻すアニメーションは引き続き発生しますが、ユーザーには表示されません。それは少しハックですが、最終結果は大丈夫だと思われます。

13
Barnabas Kendall

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

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

したがって、

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

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

8
Sean Vieira

この質問で見つけた最良の回答である Alex answer に加えて、droppableとdraggableの間で一致する属性を確認する場合は、キーワードthisを使用してアクセスできます。 accept関数内のドロップ可能オブジェクト。以下は、最近使用した小さな例です。

accept : function (draggable) {
  var id_group_drop, id_group_drag;

  //get the "id_group" stored in a data-attribute of the draggable
  id_group_drag = $(draggable).attr("data-id-group");

  //get the "id_group" stored in a data-attribute of the droppable
  id_group_drop = $(this).parent().attr("data-id-group");

  //compare the id_groups, return true if they match or false otherwise
  return id_group_drop == id_group_drag;
}

したがって、draggableが受け入れられるのは、id_group（例を思い出してください）がdroppableのid_groupと一致する場合のみです。それ以外の場合、draggableは元に戻されます。これは非常に一般的なユースケースになると思います。多分これは誰かを助けるでしょう。

5
morten.c

私は、他のドラッグ可能オブジェクトがすでに占有されているドロップ可能オブジェクトにドラッグ可能オブジェクトを配置しないという条件に基づいて機能する解決策を見つけました。

$(".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'));
    },
});
3
elhoyos

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

... accept: '#diva,#divb', ...
3
Erik

クラスを受け入れとして使用する代わりに、関数likeを使用して、条件に一致する場合にtrueを返すことができます

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});
1
Ashik

これは私の解決策です：

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");
            }
        }
    });
0
Tim Joyce