I am writing a JavaScript library for a school project that will allow you to implement drag and drop. I have implemented dragging. When the user drags a draggable object, I create a partially transparent clone of the object that follows their mouse pointer until they lift up on the mouse (onmouseup). When they are dragging over a droppable object, I want there to be a visual to show the user that they can drop their object there.
jQuery UI has accomplished this:
http://jqueryui.com/demos/droppable/#visual-feedback
I can not get this to work because my onmouseover event is not being fired because my clone element is in the way. My clone always follows the mouse pointer. How can I get the event to fire to the element under the clone?
onMouseDown/Up are defined on the elements you are dragging. Elements beneath the dragged object will not be able to catch onMouseOver event. Why? Because you are dragging object and that object only can catch the onMouseOver event.
So, to detect destination, maybe you should create a script that calculates the coordinates of the droppable object and store them. Then search if the mouse coordinates are inside the droppableObjectCoordinates and after left mouse button is released, drop what you dragged to the correct position.