0

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?

Improve this question
1
  • make a jsfiddle please. Commented Dec 10, 2011 at 0:22

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Use a mousemove event on the body that checks the mouse coordinates against the object clientX and clientY.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.