Draggable issue when loading Multiple Images in Kinetic JS

Question

$.ajax({
        type: 'get',
        url: myUrl,
        success: function(data) {
            //alert("ajax");
            $.each(data, function(idx, obj) {
                createImage(obj.id, obj.mPosX, obj.mPosY);
            });
        },
        contentType: "application/json",
        dataType: 'json'
    });

function createImage(mId, curX, curY) {
    var layer2 = new Kinetic.Layer();
    var imageObj = new Image();
    imageObj.src = 'img/pawn.png';
    imageObj.onload = function() {
        pImage[mId] = new Kinetic.Image({
            x: curX,
            y: curY,
            image: imageObj,
            draggable:true,
            id: pImage[mId]
        });
        layer2.add(pImage[mId]);
        layer2.setScale(cur_scale);
        stage.add(layer2);
    };
}

I am trying to add multiple images with different position from a JSON file, I am successful in placing the images in exact location, But the problem is if i try to drag the image it position itself at top of the canvas.

Any idea why it is behaving like this.?

Answer 1

right now you are creating a new layer for every single image. That is not how KJS works.

You first create a stage, then create a layer and then add all the images to this one layer. Maybe this will solve the problem.