拖动元素捕捉到顶部元素而不是底部元素jquery拖放

Question

假设我有一个位于另一个下方的两个落差区域，我有一个可拖动的元素，其高度等于放置区域的高度和它们之间的间距之和。当我将元素拖过两个区域并释放鼠标时，该元素将附加到底部放置区而不是顶部放置区。我需要做的是，如果我将元素放在两个区域上，我希望元素落入第一个区域而不是第二个区域。

这是我到目前为止所尝试过的。

FIDDLE

这是脚本

<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 row1应该是dropzone。如果我将鼠标悬停在第1列=>第2行和第3行，col1 row2应该是dropzone。

这是我们正在努力开发的游戏。拖放应该像我在问题中发布的那样工作。