i have 1 draggable div and 2 droppable divs. those 2 droppable divs also are draggable. so there might be a chance those 2 divs are overlapped. in that sitchuation when i drag the draggable div and drop to the overlapped divs. is there anyway to make sure it drop on the top one?
A:
I'm not super-clear on exactly what you're working with, but (if I understand what you're asking) the z-index of each div should be the key property you need.
Does the drop event of both droppables fire if the droppables overlap? It seems like that's the actual problem you're trying to solve. The droppable that's "the top one" will have the higher z-index (by definition of being "on top"). If you get 2 drops firing, within each function bound to the drop event, you can check to make sure that the droppable that fired the drop is the one with the higher z-index, and just return if it's not.
Is this what you're trying to do?
Matt Ball
2009-10-09 16:01:40
yes thats what i thought. but my situation is a bit more complcated. i have to make the mouseovered div on top to drop. and when im dragging something the mousover can never be fired cause my mouse is catually on the dragging div. therefore i clone the droppable divs and set their opacity to 0 and z-index higher than the dragging div so that i can trigger mouseover to make the mouseovered div on top to drop. new problem appear, i set the dropover event on mouseover event but it only can be strigger "after" mouseover is finished. it means i have to do the same thing twice to drop:(
ben
2009-10-10 18:06:13
Would it suffice to unbind the mouseover listener while the div is being dragged, and then rebind it when the drag is done? I think that would let you avoid that nasty business with cloning and tweaking the z-index. It sounds like there is probably a much simpler way to implement whatever you're trying to accomplish.
Matt Ball
2009-10-12 14:41:34
my goal is to make it function like what we do in windows, we can drag and drop and sort items within or thru windows. finally i got this done. i fire droppable at start. clone the droppable elements to trigger mouseover event. so that i can let the mousover divs on top. and scan the z-index on dropover even and drop event to set only the top is really droppable. :)
ben
2009-10-15 17:03:36
when drag stop it means drop start, and even when u bind mouseover at drag stop, you are still on the "drag" element so it wouldnt work :(
ben
2009-10-15 17:17:49