kineticjs將元素移動到mousedown上的另一個圖層

Question

我知道dragOnTop最近被引入，但我想要使用特定圖層，而不是始終位於頂部自動生成的圖層上。所以，我創建了一個小提琴：http://jsfiddle.net/jure/EwrkQ/

darthVaderImg.on("mousedown", function() { 
    this.moveTo(temp); 
    this.setDraggable(true); 
    //... 
} 

但它不工作！看來，當我改變層我放鬆鼠標事件鉤...請幫助！

Answer 1

那麼，因爲dragOnTop將您的項目移動到臨時圖層，那麼您應該禁用該功能。

darthVaderImg = new Kinetic.Image({... , dragOnTop: false, ...}); 

這應該有效。

Answer 2

大部分問題來自可拖動對象初始狀態莖：假

這是我的解決方案，到目前爲止，希望它帶給你更接近：http://jsfiddle.net/EwrkQ/4/

darthVaderImg.on('mouseover', function() { 
     document.body.style.cursor = 'move'; 
    }); 
    darthVaderImg.on('mousedown', function() { 
     this.moveTo(temp); 
     this.setDraggable(true); 
     this.simulate('dragstart'); 
     layer.draw(); 
     temp.draw(); 
    }); 
    darthVaderImg.on('dragmove', function() { 
     temp.draw(); 
    }); 
    darthVaderImg.on("dragend",function(){ 
     //this.setDraggable(false); 
     this.moveTo(layer); 
     layer.draw(); 
     temp.draw(); 
     this.off("mouseup"); 
     }); 

    darthVaderImg.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

Answer 3

請參考以下鏈接kineticjs移動元素到mousedown上的另一圖層

http://codedbot.com/questions/3016590/kineticjs-move-element-to-another-layer-on-mousedown