トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > HTML5 > drag&drop

ドラッグ&ドロップを実現するには、
ondragstartで指定関数にDataをセットするように記述。
ondropで指定した関数がDataを得れば良い。

/*スクリプト側*/
/*dragを開始した時に呼び出す関数。関数名は適当。*/
function dragstart(event) {
event.dataTransfer.setData("hoge",event.target.id);
}
function dragover(event) {
event.preventDefault();
}
function drop(event) {
var id = event.dataTransfer.getData("hoge"); 
             //var files = event.dataTransfer.files;
             //var file = files[x];
             //file.name;のようにすると、ファイルの情報を取ることも出来る。
var drag_target = document.getElementById(id);
event.currentTarget.appendChild(drag_target);
event.preventDefault();
}

/*html側*/
<div id="test" ondragover="dragover(event)" ondrop="drop(event)"></div> //ドラッグオーバーとドロップ先
<div id="sample" ondragstart="dragstart(event)">テスト</div> //ドラッグしたいもの
最終更新:2013年02月09日 20:14