Drag & Drop Multiple Images from Toolbar onto Canvas

Question

I am making an application in which user can drag & drop multiple objects from a toolbar onto a canvas.After dragging and dropping that particular object onto the canvas the user can move that object around in the canvas.Double Clicking on that object will make it disappear.I have been able to implement this for one object in the toolbar as shown in the link below..

http://jsfiddle.net/gkefk/26/

To drag & drop multiple objects from the toolbar I made the following additions in the function DragDrop()

   var image2 = new Kinetic.Image({
    name: data,
    id: "image"+(imageCount++),
    x: x,
    y: y,
    image2: theImage2,
    draggable: true
});
image2.on('dblclick', function() {
    image2.remove();
    layer.draw();
});
layer.add(image2);
layer.draw();

 var image3 = new Kinetic.Image({
    name: data,
    id: "image"+(imageCount++),
    x: x,
    y: y,
    image3: theImage3,
    draggable: true
});
image3.on('dblclick', function() {
    image3.remove();
    layer.draw();
});
layer.add(image3);
layer.draw();

The Fiddle containing the above code is http://jsfiddle.net/gkefk/29/

Even though I've made the necessary additions in the DragDrop() function, the two new objects are visible in the toolbar but i'm not being able to drag,drop,move around and delete them like the first object.Please Help...

chm-software.com chm-software.com · Accepted Answer · 2014-07-31T12:54:03

I made it work with some major changes:

The image sources are provided in a dynamic array - so you can extend this at one single place in your code:

var imageSrc = [
    "http://t2.gstatic.com/images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ",
    "http://sandbox.kendsnyder.com/IM/square-stripped.png",
    "http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA"
];

(of course you also have to update your HTML with the toolbar accordingly)

The list of images gets processed in a loop and for each element a new draggable object is created in connection with the corresponding <img id = "..." />:

//loop through imageSrc list
for (var i = 0; i  < imageSrc.length; i++) {
    //use a closure to keep references clean
    (function() {
        var $house, image;
        var $house = $("#house"+i);
        $house.hide();
        image = new Image();
        image.onload = function () {
            $house.show();
        }
        image.src = imageSrc[i];
        // start loading the image used in the draggable toolbar element
        // this image will be used in a new Kinetic.Image
        // make the toolbar image draggable
        $house.draggable({helper: 'clone'});
        $house.data("url", "house.png"); // key-value pair
        $house.data("width", "32"); // key-value pair
        $house.data("height", "33"); // key-value pair
        $house.data("image", image); // key-value pair
    })();
}

The counter for IDs is only relevant to the new element that is created on drop. As you only drop one image at the same time you also have to create a single new Image() only, instead of trying to create three of them.

Your working example can be found here and is extensible: http://jsfiddle.net/gkefk/32/

Drag & Drop Multiple Images from Toolbar onto Canvas

1 Answers