如何在拖放中使用Jquery克隆Canvas

Question

每當我將他拖入Dropzone時，都需要克隆我的Cavans

我的畫布

<canvas id="nota1" class="lego Nota"
width="10" height="20">
</canvas>

我的Div（Dropzone）

風格在我的style.css中

<div id="section"></div>

我的拖放功能：

它在另一個js文件中

$( drag );

function drag() {
  $('.lego.Nota').draggable({
  revert: "invalid",
  cursor: 'move'
});

$('#section').droppable();

}

它可以正常工作，但是當我終止拖動操作時，畫布將從其原始位置移動，我需要在拖放區中移動該副本的副本，並將原始位置保持在另一拖動n拖放操作的位置。

我怎樣才能做到這一點？？

Answer 1

我不認為每次都克隆畫布進行拖放是正確的方法。 查看easyljs，這是一種非常輕松的方法來完成您所請求的操作。 它通過javascript很好地訪問了畫布。

然后，可以進行如下操作：

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
       box.graphics.clear();
       box.graphics.setStrokeStyle(3)
       .beginStroke("#0066A4")
       .rect(0, 0, destHeight, destWidth);

     }else{
       evt.currentTarget.alpha=1;
       box.graphics.clear();     box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
     }

});