drag and drop multiple images from one canvas to other

Question

How do I drag and drop multiple images from one canvas to another? My manager has given me this task, it\'s been 3 days and I am not able to do this as I\'m new to HTML5. I\

Answer 1

Drag/Drop multiple items between 2 canvases

Here’s what the code does:

• Click to select one or more images from the top source canvas
• Click an image again to toggle its selection on/off
• Once you have made all your selections, drag from the top canvas to the bottom canvas
• Your selections will be moved to the bottom canvas

Some explanation about the code:

• Each image is stored in an array called Images
• An item-object for each image is stored in an array called items
• The item-object contains an item’s description, image-url, an isSelected flag and an isDropped flag.
• The mouseup event handler of the top source canvas checks for hits on images and toggles their isSelected flags.
• The mouseup event handler responds to drops onto the bottom drop canvas. It checks for selected items and records them as dropped by setting their isDropped flags.
• The drawContainer function distributes items between the source and drop canvas based on their isDropped flags (isDropped==false are drawn in the top source canvas – isDropped==true are drawn in the bottom drop canvas)

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/3KqgX/

 









    
Click an item to toggle it's selection
    
Drag from top to bottom canvas to drop selected items
    

    

[Addition: Alternate code to sort bottom canvas by order dropped]

    function handleDrop(e){
        for(var i=items.length-1;i>=0;i--){
            if(items[i].isSelected){
                items[i].isDropped=true;
                items[i].isSelected=false;
                // sort the bottom canvas by order dropped
                var move=items[i];
                items.splice(i,1);
                items.push(move);
            }
        }
        draw();
    }

[ Edited to present a solution in KineticJS ]

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/bSpBF/

    
    
        
       



    
Click on image(s) to toggle selection
    
Then click in the other canvas to drop
    

    

    Clear Hightlights
    Swap Selected