Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
These days i'm suffering from a problem. Actually i'm new in HTML5, and these days i'm try to do drag and drop multiple images from one canvas to another canvas vice-versa. I have travel multiple links but that not help me, because that links have only one canvas and drag and drop within that canvas. like below links
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape[^]
but i want like this in HTML5
http://www.w3schools.com/html/html5_draganddrop.asp[^]

Thanks
Posted
Updated 6-Oct-12 21:19pm
v2

1 solution



The short & simple answer is: you can't.

The qualified answer is: The thing with the canvas element is that it holds a number of different state variables (stroke color, width, fill color, and other assorted styles, positions and transforms) as well as the pixels that it contains. That is to say, it doesn't keep track of any elements drawn to it.

The html5 drag/drop demo moves html elements around. You could drag and drop the whole canvas, but not the objects that have been drawn to it. Imagine drawing some text in a bitmap editor over a photo background. You can't just copy the text any more - there is no 'text' - there is only a series of pixels that are coloured in a way that represents text.

That's the state of affairs with the canvas.

However, if you were to maintain a list yourself of which objects were drawn to the canvas and where, _then_ you could handle mouse events on the canvas and check your list of coords/objects to see if the cursor is above any of them. You could then 'select' the 'object' and allow dragging to another canvas. This would then remove the object from your list for the first canvas, redraw that canvas and then insert it into the list of objects to be drawn onto the second canvas, before updating that canvas too.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900