ドラッグ&ドロップを実現するには、
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