KineticJS: The drawn image after drag and drop is not in the drop target

Question

this is the code I wrote until now: http://jsfiddle.net/wQ8YA/1/

I'm trying to implement a drag & drop using jQuery and KineticJS. I did it and it's working greatly except from some details :

1- When I drag something (shape/image), it's dragged "behind" the grid, and appears only when I release the mouse.

2- The drop point is NOT where the image is rendered, it's not drawn where I drop it! This problem showed up only when I decided to make the drop zone a grid, next to an accordion.

3- I can't move a group of shapes (a rectangle + an image inside of it)

I need help, please tell me if I missed a line or a detail in the code. Here's the dragDrop function. To see the whole code and understand well my problem, see the fiddle above.

$stageContainer.droppable({
drop: dragDrop
});

// handle a drop into the Kinetic container
function dragDrop(e, ui) {
// get the drop point
var x = parseInt(ui.offset.left - offsetX, 10);
var y = parseInt(ui.offset.top - offsetY, 10);

// get the drop payload (here the payload is the image)
var element = ui.draggable;
var data = element.data("url");
var theImage = element.data("image");

// create a new Kinetic.Image at the drop point
// be sure to adjust for any border width (here border==1)
var image = new Kinetic.Image({
    name: data,
    x: x,
    y: y,
    image: theImage,
    draggable: true
});    
layer.add(image);

var $clone = ui.helper.clone();
if (!$clone.is('.inside-droppable')) {
    $(this).append($clone.addClass('inside-droppable').draggable({
                containment: $stageContainer,
                tolerance: 'fit',
                position: 'relative'
            }));
    if ($clone.is(".imag") === false) {
            $clone.resizable({
                containment: $stageContainer
            });         
    }
}  
}

markE markE · Accepted Answer · 2014-03-18T16:53:42

Fix #1 (dragged object goes behind canvas): put the kinetic container before the accordion in the html.

Fix #2 The dropzone has been moved to the right when the accordion is sized by jQuery, so you need to recalculate offsetX and offsetY after the accordion has been sized.

Fix #3 You can create a draggable Kinetic.Group and put your children shapes inside that group. When the group is dragged the children will be dragged also.

Cheers!

KineticJS: The drawn image after drag and drop is not in the drop target

1 Answers