raise javascript events or get an object from XY coords

Question

Hi, I can get an object if it's moused over. I can get the coordinates of the mouse at any given time. How do I get an object given it's coordinates - if they are different from the mouse?

Essentially the user is dropping a div on a certain place on the screen. Since the div is wider than the mouse cursor, I need to know what object the corner of the div is over (not what the mouse is over). Is there a way to raise a mousemove event in JS - passing it the coordinates?
Thanks

---

Just a quick post script for others who read this post. Although I did not choose the jquery for my answer, it may be the answer for you. This appears to be a very flexible feature rich solution for many of the client side tools we want to offer.

Answer 1

Not directly answering your question, but have you tried using a javascript library such as jQuery UI? It provides good drag/drop support & you can do the sorts of things your talking about... eg. you can make certain elements of your page draggable & others droppable & then handle the events when the user drags an element around. It provides a tolerance on the dropables that includes 'touch' (as well as 'fit', 'intersect', 'pointer'), so then you could handle the 'over' event of your dropable targets & you'd get an event handler that fires when the corner of your div is over a given element. This event handler gives you a reference to the element being dragged as well as the element its being dragged over. (a bit backwards to how you asked the question, but should be usable in solving the same problems).

Hope that's of some help...

Answer 2

There's no way to raise a mousemove and have it fill in the resulting target element properties, no.

There is a way to get an element from arbitrary co-ordinates, but you won't like it much. It involves walking over each page element and calculating its dimensions (from offsetLeft/Top/Parent) and which elements overlay which other elements (from calculated styles ‘position’ and ‘z-index’)... essentially, re-implementing part of the browser's own layout engine in script. And if you have elements with ‘overflow’ scroll/auto you have even more calculation to do.

If you have a limited case (eg. you can only drop the div somewhere amongst a set of other statically-positioned divs) it can be manageable, but the general case is quite hard and in no way fun. (Maybe someone somewhere has packaged such a feature up into a library or framework plugin, but I've not met one yet.)

If you can find another way to make your drag'n'drop behave nicely that doesn't require you to do this, then do that!