HTML5 オブジェクトのドラック&ドロップを試してみたよ

2013 年 8 月 14 日 水曜日 by Koh(884 views)

HTML5 Drag&Drop  

今回はWeb上でのドラッグ&ドロップ機能の実装を試してみました。まずは、以下サンプルをご覧ください。オブジェクト(商品1〜5)を白抜きの場所に、ドラッグ&ドロップすることができます。

 

※ご使用のブラウザーにより、うまく動かない可能性もあるかも〜

 
ドラッグ&ドロップ機能サンプル
 
商品1
商品2
商品3
商品4
商品5
 

ちゃんとドラッグ&ドロップすることができたかな?

 

記載コードは以下の通り、スタイルシート部分は省いています。

 
<script>
function dStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function dOver(event) {
event.preventDefault();
}
function dEnd(event) {
var id= event.dataTransfer.getData("text/plain");
if (event.currentTarget.innerText != "") {
Alert("そこは置けないよ〜");
event.preventDefault();
return;
}
var element =document.getElementById(id);
event.currentTarget.appendChild(element);
event.preventDefault();
}
</script>
<div>
<div id="box01" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item1" draggable="true" ondragstart="dStart(event)">商品1</div>
</div>
<div id="box02" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item2" draggable="true" ondragstart="dStart(event)">商品2</div>
</div>
<div id="box03" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item3" draggable="true" ondragstart="dStart(event)">商品3</div>
</div>
<div id="box04" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item4" draggable="true" ondragstart="dStart(event)">商品4</div>
</div>
<div id="box05" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item5" draggable="true" ondragstart="dStart(event)">商品5</div>
</div>
</div>
<div>
<div id="box11" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box12" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box13" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box14" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box15" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
</div>
 

これもHTML5の恩恵ですね。

 





コメントは受け付けていません。


Mobile Site Link