Jquery droppable - 贪婪不按预期工作 [英] Jquery droppable - Greedy not working as expected

问题描述

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

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

我还有大量需要从一个div移动到另一个div的拖放项目，以及再次回来。

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

我目前正在使用贪婪：每次拖放div都是true。 / p>

任何想法？提前致谢。

编辑

这是div2的jquery

  $（＃bs-quickAdd-que）。droppable（{
 accept：。net-items， 
 drop：function（e，ui）{
 var $ this = ui.draggable; //被拖动的元素
 $ this.addClass（bs-que-items item-in- que）; 
 $（＃bs-quickAdd-que）。css（{background-color：transparent}）; 
}，
 over：function（e ，ui）{//当拖动行框时
 var $ this = ui.draggable; //元素拖动
 $ this.appendTo（＃bs-quickAdd-que）。removeClass（ item-in-grid）; 
 
 $（＃bs-quickAdd-que）。css（{background-color：＃fff}）; 
} ，
 out：function（e，ui）{
 var $ this = ui.draggable; //被拖动的元素
 $ this.appendTo（elem）.addClass（item-在栅BS-阙项） ）removeClass（; 
 
 $（＃bs-quickAdd-que）。css（{background-color：transparent}）; 
}，
贪心：真
}）; 
  

这是div1的jquery

  elem.droppable（{
 accept：。this-items，
 greedy：true 
}）; 
  

这是可拖动的物品

  $（。bs-items）。draggable（{
遏制：窗口，
网格：[10,10]，
堆栈： .bs-items，
 cursorAt：{top：15，left：10}，
 drag：function（e，ui）{
 
 var $ this = ui.helper ，$ parent = $ this.parent（）; //被拖动的元素
 
 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）; 
} 
}）; 
  

解决方案

这就是事情。

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

这是jQuery UI的设计决定。他们不打算修复它。

I am having an unusual issue with droppable. I have a lot of code so I will try to simplify my question as best as possible.

I have two divs that are droppable within a container (which is the size of the window). div1 is 5000px by 5000px and is centered on the page (AKA there are offset positions of large numbers). div2 is absolutely positioned within the container on top of the first div. It's width is 100% of the container and height is about 50px.

I also have loads of drag and drop items that need to move from one div to the other, and back again.

The problem is, once I move an item from div2 into div1, they will not move back to div 2 again. they simply go underneath the div and remain in div1. I would love to post code, but there is so much I am not sure it would help.

I am currently using greedy:true on each drag and drop div.

Any ideas? Thanks in advance.

EDIT

This is the jquery for div2

$("#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
        });

This is the jquery for div1

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

Here is the items draggable

$(".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);
            }
        });

解决方案

Here's the thing.

jQuery UI prevents a ancestor droppables from receiving drop events when a descendent droppable is configured with {greedy: true}. It does not prevent sibling or cousin droppables from receiving drop events in cases where one overlaps the other.

This is a design decision by jQuery UI. They do not intend to fix it.

这篇关于Jquery droppable - 贪婪不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！