jquery - jQuery ドロップ可能アイテムのオーバーラップ

Question

1 つのドラッグ可能な div と 2 つのドロップ可能な div があります。これらの 2 つのドロップ可能な div もドラッグ可能であるため、これら 2 つの div が重なる可能性があります。その状況で、ドラッグ可能な div をドラッグして重複した div にドロップすると、一番上の div にドロップされることを確認する方法はありますか?

Answer 1

少し異なる問題がありました。2 種類のドロップ可能アイテムがあり、一方のタイプが常に他方の上にありました。

ドラッグ可能オブジェクトがドロップされたドロップ可能オブジェクトを知るために、ドラッグ可能オブジェクトの上にドラッグされたときに、上位のドロップ可能オブジェクトがドラッグ可能オブジェクトにクラスを追加しました。ドロップ イベントが両方のドロップ可能オブジェクトで発生すると、下部のドロップ可能オブジェクトが、ドラッグ可能オブジェクトに追加されたクラスがあるかどうかを確認しました。はいの場合、ドロップ イベントは無視されます。

top.droppable({
    over: function( drop_event, drop_ui ) {
      drop_ui.helper.addClass('over_top_element');
    },
    out: function( drop_event, drop_ui ) {
      drop_ui.helper.removeClass('over_top_element');
    },
    drop: function(drop_event, drop_ui) {
      //Handle drop here
    }
});

bottom.droppable({
    drop: function(drop_event, drop_ui) {
        if (!ui.helper.hasClass('over_top_element'))
        {
            //Handle drop here
        }
    }
});