CODEWITHSUNDEEP
javascripthtmlcanvasdrag-and-drop
user1646329
user1646329

Reputation:

Why am I getting a can't drag image symbol in IE in Canvas based game

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.

Upvotes: 0

Views: 689

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63872

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);

Upvotes: 1

Related Questions