0

我在这里有一个 jsfiddle - http://jsfiddle.net/eswZS/1/ - 有两个重叠的兄弟框并且是可放置的。我只希望当我将 redBox 放在两个顶部的米色盒子上时，它会掉入顶部的米色盒子，但我知道的技巧不起作用：redBox 总是掉入顶部的米色盒子，然后撞到底部的米色盒子。我知道 UI greedy 仅适用于父子框，因此它不会在这里捕获 drop 事件，但我认为 e.stopPropagation() 或 return false 可能会这样做：

function beigeDrop(e, ui) {
    console.log("dropping into ", this);
    e.stopPropagation();
    return false;   

}

有谁知道如何做到这一点？

谢谢

4

2 回答 2

1

新答案

将其更改为此，因为放置事件按 DOM 中框元素的顺序出现。DOM 中的第一个显示在第二个下方。所以最后一个 drop 事件实际上是最上面的那个。

当我们设置非常短的超时时间时，它会在所有丢弃事件之后放入事件队列中。对于每个丢弃事件，超时都被覆盖并不重要。最后一个 drop 事件将元素存储到变量中，然后超时是我们识别我们关心的 drop 的地方。（我不知道你是否也想保存 'ui' 变量。）

var droppedBox;
function beigeDrop(e, ui) {
    droppedBox = this;

    var timeout = setTimeout(function() {
        if (droppedBox) {
            console.log("dropping into ", droppedBox);
        }
        droppedBox = null;
    }, 1);
}

新小提琴

请注意，如果您弄乱了“z-layer”css 值，它将改变框重叠的方式，但不会改变 DOM 中框的顺序，也不会改变放置事件的顺序。（如果要处理这种情况，请存储所有放置的元素的所有 'this' 值。使用数组。然后，在超时时，您可以对数组进行排序并找到具有较高 z 层的那个并使用它作为“放置”框。）

原始答案 - 见评论问题

您是在告诉它，两个米色盒子都将接受放在它们上面的红色盒子。这将使一个盒子接受它而不是另一个：

$('#box1').droppable({drop:beigeDrop, accept:'#redbox'});
$('#box2').droppable({drop:beigeDrop, accept:'#none'});

第一个修改的小提琴

于 2013-08-05T23:18:47.227 回答
0

如果您在容器区域中有许多 droppable，那么呢？？？？

你必须重新考虑这个问题。贪婪只适用于父子关系，而不适用于兄弟姐妹。所以你必须编辑 droppable js 或者为它添加你自己的逻辑。

因此，如果您有许多 droppable，那么您必须编写一些额外的代码来处理完美 droppable 上的删除，就像在这个示例中一样。

为了使完美的兄弟姐妹可放置，请修改您的droppbale，如下所示

        var topElement = undefined;
        var topElementArray = Array();

        $( "#draggable" ).draggable();
        $( ".droppableBox" ).droppable({
            activeClass: "active-droppable",
            tolerance:'pointer',
            over: function( event, ui ) { 
                // This is for only show a message that z-index must be required for proppable
                // you can remove it after testing or after development
                if ($(this).css("z-index") == 'auto') {
                    alert("Please provide z-index for every droppable.");
                    return;
                }
                //

                topElement = undefined;
                topElementArray = Array();
                // Change it as you want to write in your code
                // For Container id or for your specific class for droppable or for both
                $('#demo > .droppableBox').each(function(){                     
                    _left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
                    _top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
                    if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {   
                          topElementArray.push($(this).attr('id'));
                    }
                });
            },
            drop: function( event, ui ) {
                if (!topElement) {
                    topElement = determineTopElement(topElementArray);
                }                   
                if ($(this).attr('id') == $(topElement).attr('id')) {
                    $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
                  // Your code after successful dropped element on specific siblings
                  // Start writing code for dropped element & perfect droppable
                }

            }
        });

        determineTopElement = function(_array) {
            var topElement;
            var zIndexHighest = 0;
            for (i = 0; i < _array.length; i++){
               var element = $("#"+ _array[i]);
               var z_index = $(element).css("z-index");
               if( z_index > zIndexHighest){
                   zIndexHighest = z_index;
                   topElement = element;
               }
            }
            return topElement;       
        }
于 2013-11-25T11:55:37.400 回答