How can activate the drag -and-drop feature inside the canvas tag ?
-
Possible duplicate of http://stackoverflow.com/questions/4468940/drag-and-drop-canvas-in-html5 – Louys Patrice Bessette Jun 13 '16 at 03:12
-
Possible duplicate of [cleanest Drag and Drop code in Javascript Canvas](http://stackoverflow.com/questions/8528428/cleanest-drag-and-drop-code-in-javascript-canvas) – Laurel Jun 25 '16 at 23:25
1 Answers
As far as I know, there is no built-in drag and drop within a canvas, because a canvas is a literal context that you draw things on. Canvas-based games constantly refresh and redraw all elements.
Basically, a canvas requires a lot of manual, fine-tuned assembly of colors, though it can be performant under circumstances where you want that type of manual, decided control
When a user clicks on an object that seems to be within your canvas, you have to calculate where that mouse event's X and Y coordinates would fall, and determine which actions can be performed onclick
on whichever thing is drawn there.
Normal DOM (not so in a canvas or iframe) will emit an event from the element you clicked, and will bubble up through all parent elements saying that some target element was clicked, and this fired event will have lots of data about that click event
A canvas is kinda like having a real painting: rather than an assembly of objects, there is nothing to drag, just a bunch of data about which pixels are which colors.
Normally, HTML elements have an attribute [draggable]
, but you would still need to manually reposition the element on mouseup
or whatever, based off of the screen, or closest non-staticly placed parent. This question might be helpful: HTML5 Canvas Drag and Drop Item
You should search around instead of asking a question like this, in my opinion