Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML5
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 6-Oct-12 21:59pm
Edited 6-Oct-12 22:19pm
v2

1 solution

Rate this: bad
good
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.
  Permalink  

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

  Print Answers RSS
0 DamithSL 365
1 Maciej Los 232
2 OriginalGriff 213
3 BillWoodruff 79
4 Jose Garcia Sevilla 75
0 OriginalGriff 7,953
1 DamithSL 6,139
2 Sergey Alexandrovich Kryukov 5,454
3 Maciej Los 5,293
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 7 Oct 2012
Copyright © CodeProject, 1999-2014
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