CODEWITHSUNDEEP
javascripthtmlfirefox
Jorge
Jorge

Reputation: 18237

dragover event in canvas doesn't fired on firefox

What I'm trying to do is a panel to add your image, which can be rotated, scaled, moved and cropped. The user should be able to move the image by dragging.

The application works well in Chrome, IE, Opera, and Safari but for some reason the drag doesn't work on Firefox. Debugging the code I see that the event dragover is not fired but the console doesn't show any errors so I really don't know what's wrong.

Here's my demo

Upvotes: 1

Views: 498

Answers (1)

Jeremy
Jeremy

Reputation: 2709

Per MDN's documentation of Drag operations, you need to setData into the dataTransfer property of the DragStart event.

In your case, the function CanvasMouseDown(e) is the event handler for #picture's DragStart, so somewhere in that function you should call:

e.dataTransfer.setData( datatype, datacontent );

Below, I have updated your example to set text/plain, which is sufficient for "just making it work", as you're dragging but not dropping. In the latter case, it would be more meaningful to set image/xxx where xxx is the appropriate format (e.g. png or jpeg).

Working code. (Verified with Firefox 25.0.1, Win 7 SP 1.)

Upvotes: 1

Related Questions