Jquery droppable - 贪婪没有按预期工作

Question

我在 droppable 方面遇到了一个不寻常的问题。我有很多代码，所以我会尽量简化我的问题。

我有两个可放置在容器中的 div（这是窗口的大小）。 div1 是 5000 像素 x 5000 像素，位于页面中心（也就是大数字的偏移位置）。 div2 绝对位于第一个 div 顶部的容器内。它的宽度为容器的 100%，高度约为 50px。

我还有大量的拖放项目需要从一个 div 移动到另一个，然后再返回。

问题是，一旦我将一个项目从 div2 移到 div1，它们就不会再移回 div 2。他们只需进入 div 下方并保留在 div1 中。我很想发布代码，但我不确定它是否会有所帮助。

我目前在每个拖放 div 上都使用 greedy:true。

有什么想法吗？提前致谢。

编辑

这是 div2 的 jquery

$("#bs-quickAdd-que").droppable({
            accept: ".bs-items",
            drop: function( e, ui ){
                var $this = ui.draggable; // the element being dragged
                $this.addClass("bs-que-items item-in-que");
                $("#bs-quickAdd-que").css({"background-color": "transparent"});
            },
            over: function( e, ui ){ // when drag of the que box
                var $this = ui.draggable; // the elementbeing dragged
                $this.appendTo("#bs-quickAdd-que").removeClass("item-in-grid");

                $("#bs-quickAdd-que").css({"background-color": "#fff"});
            },
            out: function( e, ui ){
                var $this = ui.draggable; // the element being dragged
                $this.appendTo(elem).addClass("item-in-grid").removeClass("bs-que-items");

                $("#bs-quickAdd-que").css({"background-color": "transparent"});
            },
            greedy: true
        });

这是 div1 的 jquery

elem.droppable({
                accept: ".bs-items",
                greedy: true
            });

这是可拖动的项目

$(".bs-items").draggable({
            containment: "window",
            grid: [10,10],
            stack: ".bs-items",
            cursorAt: {top: 15, left: 10},
            drag: function(e,ui){

                var $this = ui.helper, $parent = $this.parent(); // the element being dragged

                if($parent.is("#grid")){
                    thisx = Math.round(e.pageX - elem.offset().left);
                    thisy = Math.round(e.pageY - elem.offset().top);
                }else{
                    thisx = Math.round(e.pageX - $("#bs-quickAdd-que").offset().left);
                    thisy = Math.round(e.pageY - $("#bs-quickAdd-que").offset().top);                   
                }
                ui.position.left = thisx-($this.width()/2);
                ui.position.top = thisy-($this.height()/2);
            }
        });

Answer 1

事情是这样的。

当 descendent droppable 配置为 {greedy: true} 时，jQuery UI 会阻止 ancestor droppables 接收 drop 事件。它确实不会阻止 sibling 或 cousin droppables 在一个重叠的情况下接收 drop 事件。

这是 jQuery UI 的设计决定。他们do not intend to fix it。