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

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

我借助图像元素构建了drag'n'drop。但现在我想用canvas来更新图像上的数字。我想使用画布文本函数来更新图像

问题是，当我从顶部复制canvas元素时，html插入效果很好，但由于某些原因它没有被绘制出来

请注意这里的密码代码是为Google Chrome编写的

编辑：

我在这里做了一些小调整：

请注意对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);
        };

    });
}

---

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

如果您有外部js资源，请通过页面左侧的“添加资源”部分添加它们。不，我没有。JQuery是外部的，但我已经检查了它是否包含。对不起，我应该更具体一点，因为找不到js/floorplan.js。但是如果不是必需的，那么忽略我：）谢谢您的审阅，但是this.innerHTML&$（this.html（）没有多大意义。项目html代码以前存在（请检查我版本中的区域），因此问题不在样式中。@InsideZ您完全正确。请注意我所做的更新。以你的原创作品为基础的小提琴似乎如你所期望的那样工作。