html - 将带有 Canvas 的 div 元素拖到另一个

Question

我第一次体验开发 html5 应用程序。我的问题是制定房间计划。在页面顶部，我有要拖动到底部 map 区域的元素(它们被复制)。在 map 区域我可以移动元素，但不能复制。

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

问题是当我从顶部复制 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);
        };

    });
}

只要处理了放置事件，就会再次绘制图像。这是缺少的组件，因为图像只被绘制了一次。