4

I am faced with a problem almost identical to this thread:

jQuery droppable - receiving events during drag over (not just on initial drag over)

The only difference is I need to know the element I'm over and it's NOT a "droppable" element. It's just an element INSIDE my droppable.

So if I have a parent DIV (that is the droppable) that has 3 child DIVs, while I'm dragging my item over the 3 child DIVs, I want to know if, when dropped, the item should be dropped above or below one of the child elements.

The same problem exists as in the post above (mouseover, etc., events are not firing on the child elements of the droppable div).

Thoughts?

Community
  • 1
  • 1
retsvek
  • 41
  • 1
  • Is this just a UI feature? Does it drop in the correct place, but you're not getting the style you want while dragging? – Eli Gassert Sep 24 '13 at 17:53
  • see: http://stackoverflow.com/questions/8810378/javascript-elementfrompoint-select-bottom-element – Kerry Liu Sep 24 '13 at 18:10
  • Yes, I know I can convert the non-droppables to droppables and use the method in the link above, but I'm trying to solve this without do that. Thanks! – retsvek Sep 24 '13 at 18:11
  • @Eli - I want to show an indicator as to where the item WILL be dropped when they release the mouse button. I can't show them where it's going to go, though, unless I can tell what child DIV I'm over. – retsvek Sep 24 '13 at 18:12
  • Ok so besides the UI giving the proper feedback of where it is going to drop, when you DO drop it, it DOES drop at the right spot? – Eli Gassert Sep 24 '13 at 18:22
  • Is this going in the right direction? http://jsfiddle.net/C5UnK/3/ – Eli Gassert Sep 25 '13 at 13:14

1 Answers1

0

You could get the mouse X & Y coordinates or the offset X & Y of the item when dropped - plus it's height & width etc. so you could calculate the boundaries of the object and get an accurate drop position.

$(this).offset().top / $(this).offset().left

$(document).mousemove(function(event) {
    currentMousePos.x = event..pageX;
    currentMousePos.y = event.pageY;
});

Then iterate over the objects that sit below and compare their coordinates / boundaries with your object ones. You can have some logic that works out if more is above than below etc. if it's not a straightforward call.

Henry Gibson
  • 2,038
  • 2
  • 15
  • 12