HTML5の「ドラック&ドロップ」機能を利用して、カロリー合計の出来るツールを作りたいと考えています。
内容は、好きな食べ物を選び、枠の中にドラック&ドロップすると
選んだものの合計カロリーが表示されるというものなのですが、
素材に数値をつけ、計算させる方法が分からないでいます。
もし、わかる方がいらっしゃいましたら、是非教えて頂きたく存じ上げます。
現段階は「ドラッグ&ドロップをしてイラストを好きな場所へ持っていくことが出来る」というところまで
<!DOCTYPE html>
・・・
＜div id="dragarea">
＜img src="ご飯.png" calory='230' class="item"/>
＜img src="食パン.png" calory='100' class="item"/>
＜img src="みそ汁.png" calory='45' class="item"/>
＜img src="シャケ.png" calory='150' class="item"/>
＜img src="目玉焼き.png" calory='80' class="item"/>
＜img src="ヨーグルト.png" calory='40' class="item"/>
＜/div>
＜div id="droparea">
＜script>
window.addEventListener('load', function() {
var els = document.querySelectorAll('#dragarea .item');
for (var i=0; i<els.length; i++) {
els[i].id = 'item'+i;
els[i].addEventListener('dragstart', function(evt) {
evt.dataTransfer.setData('Text', evt.target.id);
}, true);
}
var droparea = docum
droparea.addEventListener('dragover', function(evt) {
evt.preventDefault();
}, true);
droparea.addEventListener('drop', function(evt) {
var id = evt.dataTransfer.getData('Text');
var target = document.getElementById(id);
target.style.left = evt.clientX-64+'px';
target.style.top = evt.clientY-64+'px';
droparea.appendChild(target);
evt.preventDefault();
}, true);
}, true);
＜/script>＜/body>＜/html>
因みにこのソースは、好きな場所（自動整列なし）に
ドラック&ドロップすることができますが
出来ればこの要素はそのままにしたいのです。
（不可能であれば仕方ないのですが…。）
どうぞよろしくお願い致します
