javascript - 2ドロップターゲットでドラッグアンドドロップ

Question

ドラッグアンドドロップの例を探しています。ドラッグアイテムには、2つのドロップ可能な領域と一致する必要がある2つの異なる領域があります。

例：

青いドラッグアイテムは、赤い子がそれぞれ緑の領域に着地する位置にドロップされない限り、元に戻してほしいです。

理想的には（私が経験しているように）jquery uiを使用したいのですが、事前のおかげで、どのjavascriptライブラリでも問題ありません。

Answer 1

draggable/droppableオプションの組み合わせを使用してこれを実現できます。次のようなHTMLを指定します。

<div id="blue" class="valid">
    <div id="red-one" class="red"></div>
    <div id="red-two" class="red"></div>
</div>

<div id="green-container">
    <div id="green-one" class="green">
    </div>
    <div id="green-two" class="green">
    </div>
</div>

（CSSを省略して、いくつかのルールを追加しました。以下のフィドルを参照してください）。

次のようにJavaScriptを記述できます。

function isInside(one, other) {
    return one.offset().left >= other.offset().left &&
        one.offset().top >= other.offset().top &&
        one.offset().top + one.height() <= other.offset().top + other.height() &&
        one.offset().left + one.width() <= other.offset().left + other.width();
}

$("#blue").draggable({
    drag: function(event, ui) {
        var $this = $(this);
        var $reds = $this.children(".red");
        var $greens = $("#green-container").children(".green");
        var firstRed = $reds.first();
        var firstGreen = $greens.first();
        var secondRed = $reds.last();
        var secondGreen = $greens.last();

        if (isInside(firstRed, firstGreen) && isInside(secondRed, secondGreen)) {
            $this.addClass('valid');
        }
        else {
            $this.removeClass('valid');
        }       
    },
    revert: 'invalid'
});


$("#green-container").droppable({ accept: ".valid" });

ここでそれをチェックしてください：http：//jsfiddle.net/andrewwhitaker/g6FKz/

ノート：

• 何らかの理由で、最初に「valid」クラスを「blue」divに適用する必要がありました。そうしないと、ターゲットのdroppableは、有効であったとしても、ドラッグされた要素を受け入れません（これに関する入力をいただければ幸いです）。何が起こっているのかわからない、jQueryUIのバグかもしれません。しかし、大したことではありません。
• ドロップ可能なターゲットは、正確には2つの緑の要素ではなく、divそれらの要素を含む白です。これは例から明らかです。
• ドラッグ可能オブジェクトを移動するたびdivに、「ドラッグ」イベントが呼び出されます。このイベントは、赤いボックスが緑色のボックス内にあるかどうかを判断validし、ドラッグ可能オブジェクトにクラスを割り当てdivます。validドロップ可能なオブジェクトは、ドラッグ可能なオブジェクトのみを受け入れます。

お役に立てば幸いです。