javascript - ドラッグされた要素を下部要素のjqueryドラッグアンドドロップではなく上部要素にスナップさせます

Question

上下に 2 つのドロップ ゾーンがあり、高さがドロップ ゾーンの高さとそれらの間の間隔の合計に等しいドラッグ可能な要素があるとします。要素を両方のゾーンにドラッグしてマウスを離すと、要素は上部のドロップ ゾーンではなく下部のドロップ ゾーンに追加されます。私がする必要があるのは、要素を両方のゾーンに配置する場合、要素を2番目のゾーンではなく最初のゾーンにドロップすることです。

これは私がこれまでに試したことです。

フィドル

そしてこれがスクリプトです

<script type="text/javascript">
    var display_under_drag = '';
    $(document).ready(function(e) {
        $( ".draggable_display" ).draggable({revert: "invalid"});

        $( ".draggable_display" ).on( "dragstart", function( event, ui ) {
            display_under_drag = $(this).attr('id');
            $('.droppable_display').each(function(index, element) {
                //$(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
            });
        });

        $( ".draggable_display" ).on( "drag", function( event, ui ) {
            $(this).css('z-index','3001');
            $('.droppable_display').each(function(index, element) {
                if($("#"+display_under_drag).hitTestObject($(this)))
                {
                    //console.log($('#'+display_under_drag).data().display_type);
                    //console.log($(this).data().dim);
                    console.log($(this).attr('id'));
                    $(this).css({'border-color':'#3CC','border-style':'solid','border-width':'3px'});
                }
                else
                {
                    $(this).css({'border-width':'0px'});    
                }
            });
        });

        $( ".droppable_display" ).droppable({greedy: true,tolerance: 'touch',accept: ".draggable_display"});
        $( ".droppable_display" ).on( "drop", function( event, ui ) {
            //alert(display_under_drag);
            if($('#'+display_under_drag).data().display_type == '2x1')
            {
                $('#'+display_under_drag).appendTo($(this));
                $('.droppable_display').each(function(index, element) {
                   $(this).css({'border-width':'0px','z-index':'1000'});
                });
                $(this).css('z-index','3000');
                //$('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
                $('#'+display_under_drag).appendTo($(this));
                $('.droppable_display').each(function(index, element) {
                   $(this).css({'border-width':'0px','z-index':'1000'});
                });
                $(this).css('z-index','3000');
                $('#'+display_under_drag).css({'position':'absolute','top':'0px','left':'0px'});
            }
        });
        $( '.draggable_display' ).on('mouseup',function(e){
            $('.droppable_display').each(function(index, element) {
                $(this).css({'border-width':'0px'});
            });
        });
    });
</script>

誰か助けてくれませんか。

編集: このような複数のドロップゾーンが隣り合わせに積み重ねられている場合があります。3x3 グリッドのように。いずれの場合も、ドロップを受け入れるのは上部のドロップゾーンであり、下部のドロップゾーンではありません。たとえば、列 1 => 行 1 と行 2 にカーソルを合わせると、col1 行 1 がドロップゾーンになります。列 1 => 行 2 および行 3 にカーソルを合わせると、 col1 row2 がドロップゾーンになります。

これは、私たちが開発しようとしているゲーム用です。ドラッグ アンド ドロップは、質問に投稿した方法で機能するはずです。