Question

我对droppable有一个不寻常的问题。我有很多代码，所以我会尽量简化我的问题。

我有两个可在一个容器内放置的div（这是窗口的大小）。 div1是5000px乘5000px并且以页面为中心（AKA有大数的偏移位置）。 div2绝对位于第一个div顶部的容器中。它的宽度是容器的100％，高度约为50px。

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

问题是，一旦我将一个项目从div2移动到div1，它们就不会再次移回div 2。他们只是在div下面并保持在div1中。我很想发布代码，但有很多我不确定它会有用。

我目前正在使用贪婪：每次拖放div都是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

这就是事情。

当后代 droppable配置为{greedy: true}时，jQuery UI会阻止祖先 droppables接收丢弃事件。如果一个与另一个重叠，则不阻止兄弟或 cousin droppables接收丢弃事件。

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

Jquery droppable - 贪婪不按预期工作

1 个答案: