KineticJS:拖放后绘制的图像不在拖放目标中

这是我到现在为止写的代码:http://jsfiddle.net/wQ8YA/1/

我想实现一个拖拽&drop使用jQuery和KineticJS。我这样做了，除了一些细节之外，它工作得很好:

1-当我拖动某些东西(形状/图像)时，它会被拖到网格的"后面"，只有当我松开鼠标时才会出现。

2-落点不是图像渲染的地方，它不是在我放下它的地方绘制的!只有当我决定将拖放区域设置为网格时，这个问题才会出现。

3-我不能移动一组形状(矩形+其中的图像)

我需要帮助，请告诉我，如果我错过了一行或一个细节的代码。下面是dragDrop函数。要查看整个代码并更好地理解我的问题，请参阅上面的代码

$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
            });         
    }
}  
}