Перетащите элемент div с canvas на другой

Question

У меня первый опыт разработки html5-приложений. Моя задача - составить план комнаты. В верхней части страницы у меня есть элементы для перетаскивания в нижнюю область карты (они копируются). В области карты я могу перемещать элементы, но не копировать.

Я создал drag'n'drop с помощью элементов изображения. Но теперь я хочу использовать canvas для обновления чисел на изображениях. Я хочу использовать текстовые функции для обновления изображений.

Проблема в том, что когда я копирую элемент canvas сверху, html вставляется хорошо, но по некоторым причинам он не рисуется.

Пожалуйста, посмотрите код здесь http://jsfiddle.net/InsideZ/MuGnv/2/. Код был написан для Google Chrome .

Answer 1

EDIT:

Я сделал несколько небольших изменений: 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);
        };

    });
}

Каждый раз, когда обрабатывается событие отбрасывания, изображения отрисовываются снова. Это был отсутствующий компонент, так как изображение рисовалось только один раз.