draggable

HTML5では，DOM要素をドラッグ&ドロップすることができる．モジラのページによれば，ドラッグしたい要素のタグにdraggable=”true”と書く．

<div ondragover=”f_dragover(event)” ondrop=”f_drop(event)”>
<img src=”images/drag.gif” draggable=”true” ondragstart=”f_dragstart(event)”>
<img src=”images/drig.gif” draggable=”true” ondragstart=”f_dragstart(event)”>
<img src=”images/drug.gif” draggable=”true” ondragstart=”f_dragstart(event)”>
</div>
<div ondragover=”f_dragover(event)” ondrop=”f_drop(event)”>
</div>

　さらに，JavaScriptでdataTransferを用いて書いていく．つかみはじめ，つかみおわり，受け取る側の3つで少なくとも動く．

<script>
function f_dragstart(event){
event.dataTransfer.setData(“text”, event.target.id);
}

function f_dragover(event){
event.preventDefault();
}

function f_drop(event){
var id_name = event.dataTransfer.getData(“text”);
var drag_elm =document.getElementById(id_name);
event.currentTarget.appendChild(drag_elm);
event.preventDefault();
}
</script>

　こうするだけでドラッグとドロップが実現する．メソッドはエリック氏の解説による．jQuery UIでつくることも多いらしい．jQuery UIの日本語ページに作り方の説明があって助かる．