I implemented drag and drop here. Try clicking on the ball and dragging it around.
http://joelin.org/p/mouse2.html
However, I used the html element as the one that catches mouse events. If I use the ball element to catch events instead, my mouse pointer quickly leaves the ball behind if the mouse pointer moves too fast.
I would like the listener to be attached to the ball so I can attach listeners to multiple balls. Is this possible? Thanks,
Have you tried jQuery Draggable? http://jqueryui.com/draggable/
Related
So, I'm creating this webpage with a counter-intuitive way of navigating. What I'm hoping to achieve is to have to cursor move in the opposite direction of your mouse movement input.
What I did is hide the cursor altogether and let an element move in the opposite direction of mouse movement using JavaScript and CSS. The problem with this is I cannot get the new element to perform tasks like mouse enter and mouse hover. Any ideas or suggestions as to what I could do with this?
You'll have to get creative here. You could, for instance, add a handler to the window for onclick, onmousemove, etc..Inside that handler, use document.elementFromPoint(x, y) to get an element at a position and then explicitly fire events on that.
If you have overlapping elements (and want to trigger multiple events), you'll have to keep track internally of all elements that are 'interactable'. Perhaps by attaching a specific class or tag to them and then getting a list with a selector.
I have a shape that has hoverIn() and hoverOut() function and it can be dragged at the same time. My problem is when I drag too fast (not like really really fast), the mouse pointer may go outside of the shape boundary before the shape is actually moved. This cause hoverOut to be fired and it messes up with my dragging function. When I drag slow, this doesn't happened since the shape displacement is small and the mouse is always inside.
How can I handle the fact that if I'm dragging I don't want to deal with hoverOut. I tried the unHoverfunction(), it partially worked but now after dragging and leaving the shape the hoverOut function is not fired as it should be.
I've just created a flag, it seems like no built-in solution exist. Thanks for your time.
I have a chessboard like UI, wherein when I drag across check squares I need to EaselJS to detect my shapes(different squares) .I have hooked up those shapes with onMouseMove event handler. However I see that which ever shape gets clicked on mouse down that same shapes keeps emitting the onmousemove event even though I have moved outside the surface area of that shape and onto another shape. How can I have events that listen when I move out of the shape and into another shape using drag/touch or mouse drag?
The mousemove events come from the shape you clicked on, so the target will always be that initial clicked shape.
To determine what is currently under the mouse, use the getObjectUnderPoint or getObjectsUnderPoint APIs.
http://www.createjs.com/Docs/EaselJS/classes/Container.html#method_getObjectsUnderPoint
I'm making a game using the HTML5 canvas. There is some odd behaviour when dragging and dropping in Internet Explorer. It works most of the time, but approximately one in ten times it will show the can't drag image symbol (that little circle with a cross through it). When I release the mouse button after this has happened the image will jump into place, and it then follows the mouse around despite the mouse button being up, like the mouseup event never happened. This does not happen at all in any other browser which makes me think it's not the way I have implemented drag and drop.
I can't understand why it would show this symbol even if there was something wrong with my drag and drop code. How would it even know I'm trying to drag an image? Has anyone experienced this before and what did you do about it?
I didn't think it was necessary to post any code as it's just standard drag and drop, although I have my own input class so it might look confusing. But I'll talk about some of the details now.
If the mouse is pressed that frame I check to see whether it's over one of the draggable images. If it is then next time the mouse is moved while the mouse button is still down the image is moved to the mouse's new position minus the offset.
I remove the mouse move event listener each time the mouse is released and add the event listener each time the mouse button is pushed. I store each mousedown and mouseup event in an array, and on each frame I loop through the events to set the appropriate flags. (wasPressed, wasReleased, isDown, etc) I only store the the most recent mousemove event. I then query these flags from my game loop.
Make sure you're not letting any events bubble, usually this means calling e.preventDefault(); on your mouseodwn/move/up events
in addition, you should prevent selection on the canvas, which should stop some dragging and double click bugs:
canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false);
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.
Use a mousemove event on the body that checks the mouse coordinates against the object clientX and clientY.