将带有画布的 div 元素拖到另一个元素上

Question

我第一次获得了开发 html5 应用程序的经验。我的问题是制定房间计划。在页面顶部，我有一些元素可以拖动到底部地图区域（它们被复制）。在地图区域中，我可以移动元素，但不能复制。

我在图像元素的帮助下构建了拖放功能。但现在我想使用画布来更新图像上的数字。我想使用画布文本函数来更新图像。

问题是当我从顶部复制canvas元素时，html插入得很好，但由于某些原因没有绘制。

请在此处观看代码 http://jsfiddle.net/InsideZ/MuGnv/2/。 代码是为 Google Chrome 编写的。

Answer 1

编辑：

我在这里做了一些小调整： http://jsfiddle.net/MuGnv/5/

请注意对drawImg 函数所做的更改：

function drawImg(src, targetClass) {

    $(targetClass).each(function() {
        var ctx = $(this).get(0).getContext('2d');
        var img = new Image();
        img.src = src;
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
        };

    });
}

每当处理放置事件时，都会再次绘制图像。这是缺少的组件，因为图像只被绘制一次。