Question

现在，我有一个舞台，两个图层和左边的图像。我通过添加属性draggable: true使图像可拖动。我找到的所有拖放样本（动力学文档，教程，jsfiddles ......）都在同一区域内。

如何才能使在左侧图层上绘制的项目仅在右侧中删除，否则，使它们像在jquery中一样恢复（如果它是可实现的）？

这是我正在编辑的the jsfiddle。救命啊！

Answer 1

您需要做的是克隆对象，触发dragstart事件，然后在dragend上检查项目是否放置在正确的容器中，否则，将其设置为原始容器的动画。

没有恢复的示例：http://cs.neiu.edu/~tsam/physics/index.phtml（您可以使用user：test，pass：test登录）

示例代码：

itemBeingCloned.on（'mousedown touchstart'，function（）{ var userPos = stage.getPointerPosition（）;

    var cloneOfItem= new Kinetic.Image({
        image: imageObj, // image of object being cloned
        x: userPos.x,
        y: userPos.y,
        height: 25, // or set the height
        width: 25, // or set the width
        draggable: true,
        offset: 12,
        dragOnTop: false // you might actually allow this to be true
    });
    yourTemporaryLayer.add(cloneOfItem); // well, you need to store this in a layer temporarily, you should have a layer which takes up the whole stage, and two child layers under it, left and right 

    /* Lets define the behavior (events) of the item you want to copy */
    cloneOfItem.on('dragmove', function(){ 
        // in case you need to do something while moving the item
    });

    cloneOfItem.on('dragend', function(){ // once you are done dragging, check if placing somewhere, most of the logic will go here
        // check if on right side, 
            //if so, add to right layer, else
            //else animate back to original position, then destroy
    });

    cloneOfItem.on('dblclick dbltap', function(evt){ // in case you want to remove the item, I defined it as double-click event destroying the item
        this.remove(); // remove from layer
        this.destroy(); // destroy object
    });

    /* so when you do mousedown on the original item, it will create the item, and fire the previously defined events (above) */
    cloneOfItem.fire('mousedown');
    cloneOfItem.fire('touchstart');
    cloneOfItem.fire('dragstart');

    yourRightLayer.draw(); //redraw the layer just in case? maybe not needed

});

更新（更简单）

示例代码：

itemBeingCloned.on('mousedown touchstart', function(){
    var userPos = stage.getPointerPosition();

    var cloneOfItem= itemBeingCloned.clone();

    yourTemporaryLayer.add(cloneOfItem); // well, you need to store this in a layer temporarily, you should have a layer which takes up the whole stage, and two child layers under it, left and right 

    cloneOfItem.on('dragend', function(){ // once you are done dragging, check if placing somewhere, most of the logic will go here
        // check if on right side, 
            //if so, add to right layer, else
            //else animate back to original position, then destroy
    });

    /* so when you do mousedown on the original item, it will create the item, and fire the previously defined events (above) */
    cloneOfItem.fire('mousedown');
    cloneOfItem.fire('touchstart');
    cloneOfItem.fire('dragstart');

    yourRightLayer.draw(); //redraw the layer just in case? maybe not needed

});

更新：这是一个非常粗略的实现 http://jsfiddle.net/GLFxF/16/

KineticJS从一层拖放到另一层

1 个答案: