动态JS拖动一个图层会导致另一个图层上的形状对拖动停止响应

Question

我一直在使用Kinetic开发一个应用程序，它使用几个图层来保持组织，并且我在多个图层中有可拖动的元素。我发现当一个图层被拖动时，另一个图层上的形状不再是可拖动的。

在提供的裁剪示例中，一旦下层被拖动，上层的蓝色矩形就不再可拖动了，我不明白为什么会这样。

我已经尝试过查看文档和各种教程，询问Stackoverflow是我最后的手段，所以我希望有人能帮助!

顺便说一下，我已经尝试将draggable图层的dragOnTop设置为false，这不会改变结果。

谢谢,奥斯卡

http://jsfiddle.net/EveryoneMustWin/QRaxJ/

var kItems = {};
kItems.stage = new Kinetic.Stage({
    container: 'container',
    width: $("#container").width(),
    height: $("#container").height()
});
kItems.lowerLayer = new Kinetic.Layer({
    scale: 1.0,
    id: "lower",
    draggable: true,
    dragBoundFunc: function(pos) {
        return {
            x: pos.x,
            y: pos.y
        }
    }
});
kItems.upperLayer = new Kinetic.Layer({
    scale: 1.0,
    id: "upper"
});
kItems.stage.add(kItems.lowerLayer);
kItems.stage.add(kItems.upperLayer);
kItems.backdrop = new Kinetic.Rect({
    x: 50, 
    y: 50, 
    width: 200, 
    height: 200,
    stroke: '#822',
    strokeWidth: 2,
    fill: '#b62',
    opacity: 1,
    id: 'backdrop'
});
kItems.lowerLayer.add(kItems.backdrop);
kItems.block1 = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 20,
    height: 20,
    stroke: '#228',
    strokeWidth: 2,
    fill: '#65b',
    opacity: 1,
    id: 'block1',
    draggable: true
});
kItems.upperLayer.add(kItems.block1);
kItems.block2 = new Kinetic.Rect({
    x: 180,
    y: 100,
    width: 20,
    height: 20,
    stroke: '#228',
    strokeWidth: 2,
    fill: '#65b',
    opacity: 1,
    id: 'block2',
    draggable: true
});
kItems.upperLayer.add(kItems.block2);
kItems.lowerLayer.draw();
kItems.upperLayer.draw();
kItems.lowerLayer.on("dragmove", function() {
    kItems.upperLayer.setAttrs({x:this.getX(), y:this.getY()});
    kItems.upperLayer.draw();
});

Answer 1

在此修复之前，我的解决方案是在我的dragEnd处理程序上调用layer. drawhit()，该处理程序变得无响应(参见我上面的评论)。这使得我有可能继续使用最新版本(有许多很好的改进，我不想失去使用4.3.3)。