KineticJS從一層拖放到另一層

Question

現在，我在左圖上繪製了一個舞臺，兩個圖層和圖像。我通過添加屬性draggable: true使圖像可拖動。我找到的所有拖放樣本（kinetic docs，tutorials，jsfiddles ...）都位於同一區域內。

我該怎麼做才能讓誰是左層上繪製的項目將在合適的層僅下降，否則，讓他們在jQuery的恢復一樣（如果它是可執行的）？

這是我編輯的the jsfiddle。幫幫我！

Answer 1

你需要做的是複製對象，激發dragstart事件，然後在dragend上檢查項目是否放置在正確的容器中，否則將其動畫回原始容器。

實施例而不復歸：http://cs.neiu.edu/~tsam/physics/index.phtml（可以與用戶登錄：測試，通過：測試）

示例代碼：

itemBeingCloned.on（ '鼠標按下touchstart'，函數（）{ 變種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/