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);
}
});