Kinetic JS перетаскивание слоя заставляет фигуры на другом слое перестать отвечать на перетаскивание

Question

Я разрабатываю приложение, использующее Kinetic, которое использует несколько слоев, чтобы упорядочить вещи, и у меня есть элементы перетаскивания в нескольких слоях. Я нахожу, что когда один слой перетаскивается, фигуры на другом слое больше не перетаскиваются.

В приведенном примере вырезания синие 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(); 
}); 

Answer 1

Мой обходной путь, прежде чем это зафиксировано в том, чтобы назвать layer.drawHit() на моем dragEnd обработчик для слоя, который стал отвечать на запросы (см мой комментарий выше) , Это позволило мне продолжить использование новейшей версии (есть много приятных улучшений, которые я не хотел потерять, используя 4.3.3). Надеюсь это поможет.