0

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

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

小提琴

这是脚本

<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。如果我将鼠标悬停在 column 1 => row 2 和 row 3 上，则 col1 row2 应该是 dropzone。

这是我们正在尝试开发的游戏。拖放应该按照我在问题中发布的方式进行。

4

0 回答 0