Question

我试图实施一个拖拉机使用jQuery和KineticJS删除。我做到了，除了一些细节之外，它的工作量很大：

1-当我拖动某些东西（形状/图像）时，它被拖到＆＃34;后面＆＃34;网格，仅在我释放鼠标时出现。

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

Answer 1

修复＃1 （拖动的对象位于画布后面）：将动能容器放在html中的手风琴之前。

修复＃2 当手风琴按jQuery调整大小时，dropzone已移至右侧，因此您需要在手风琴大小后重新计算offsetX和offsetY

修复＃3 您可以创建一个可拖动的Kinetic.Group并将您的子项形状放在该组中。当拖动组时，孩子们也会被拖动。

干杯！

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

1 个答案: