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

【问题标题】：How to clone Canvas with Jquery in a Drag n Drop如何在拖放中使用 Jquery 克隆 Canvas
【发布时间】：2023-04-08 04:04:01
【问题描述】：

每次我将 Cavans 拖入放置区时，我都需要克隆他

我的画布

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

我的 Div(Dropzone)

style 在我的 style.css 中

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

我的拖放功能：

它在不同的 js 文件中

$( drag );

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

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

}

它工作正常，但是当我终止我的拖动操作时，画布从他的原始位置移动，我需要在 dropzone 中移动它的一个克隆，并且原来的位置保持在另一个拖放操作的位置。

我该怎么做？？

【问题讨论】：

标签： javascript jquery canvas drag-and-drop

【解决方案1】：

我不认为每次都克隆画布以进行拖放是解决此问题的正确方法。查看easeljs，以一种非常简单的方法来完成您的要求。它通过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);
     }

});

【讨论】：