Click here to Skip to main content
13,351,985 members (78,200 online)
Rate this:
Please Sign up or sign in to 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[^]
but i want like this in HTML5[^]

Posted 6-Oct-12 21:59pm
Updated 6-Oct-12 22:19pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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.

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.180111.1 | Last Updated 7 Oct 2012
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100