div要素をキャンバスで別のものにドラッグ

Question

私はhtml5アプリケーションの開発で初めての経験があります。私の問題は部屋の計画を立てることです。ページの上部には、下部の地図エリアにドラッグする要素があります（コピーされます）。マップエリアでは要素を移動できますが、コピーは移動できません。

私は画像要素の助けを借りてdrag'n'dropを構築しました。しかし、今ではキャンバスを使って画像上の数字を更新したいと思っています。私は画像を更新するためのキャンバスのテキスト関数を使用したいと思います。

問題は、キャンバス要素を上からコピーしたとき、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); 
     }; 

    }); 
} 

いつが、画像が描かれています再び。これは、画像が1度だけ描画されていたため、欠落していたコンポーネントです。