javascript - キネティック JS でレイヤーをドラッグすると、別のレイヤーのシェイプがドラッグに反応しなくなる

Question

私は、物事を整理するために複数のレイヤーを使用するキネティックを使用してアプリを開発しており、複数のレイヤーにドラッグ可能な要素があります。あるレイヤーをドラッグすると、別のレイヤーの図形がドラッグできなくなることがわかりました。

提供されたカットダウンの例では、下のレイヤーがドラッグされると、上のレイヤーの青い Rects はドラッグできなくなります。これがなぜなのかわかりません。

ドキュメントとさまざまなチュートリアルを調べてみましたが、Stackoverflow に尋ねるのは私の最後の手段なので、誰かが助けてくれることを願っています!

ちなみに、ドラッグ可能なレイヤーで 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();
});