JavaScript: Drag & Drop API で画像を移動する
HTML5 の Drag & Drop API を使って、画像を移動するサンプルを作ってみました。
サンプルでは、上側のボックスに表示されている画像を、 下側のボックスにドラッグ・アンド・ドロップできます。
サンプルの後にソースコードを表示・解説しています。
動作サンプル
HTML
<div class="box">
<img id="drag" src="img/bg_nangoku.jpg">
</div>
<div class="box" id="drop"></div>
div 要素で上下2つのボックスを作成し、上側のボックス内に img 要素があります。
img 要素をドラッグアンドドロップする場合は、デフォルトで「draggable="true"」と なっていますから、draggable 属性を設定する必要はありません。
ここでは、ドラッグする img 要素の id="drag" 、 ドロップする div 要素の id="drop" としています。
CSS
.box {
width: 300px;
height: 150px;
border: 1px solid black;
margin: 3px;
}
JavaScript
var target = null;
window.onload = function() {
var drag = document.getElementById('drag');
var drop = document.getElementById('drop');
// drag側
drag.addEventListener('dragstart', function(e){
target = e.target;
}, false);
// drop側
drop.addEventListener('dragover', function(e){
e.preventDefault();
}, false);
drop.addEventListener('drop', function(e){
e.preventDefault();
e.target.appendChild(target);
}, false);
}
画像をドラッグアンドドロップするだけなので、シンプルなコードになっています。
今回、addEventListner() で設定するイベントは、「dragstart」, 「dragover」, 「drop」 の3つだけです。
「dragover」は「e.preventDefault();」でブラウザのデフォルト動作をキャンセルしています。 これがないとドロップ操作が正しく認識されません。忘れがちなので注意してください。
ソースの流れとしては、「dragstart」時に e.target をキープしておいて、 「drop」時に appendChild() メソッドで画像を追加しています。
動作サンプル その2
先程のサンプルを少しだけですが、変更してみます。
先程は、ドラッグしている最中に、上側のボックスに画像が表示されたままでした。
今回は、ドラッグしている最中は、上側の画像を消します。
そして、下側のボックスにドラッグされた場合は下側に画像を移動します。 もし下側のボックス以外の場所にドラッグされた場合は、上側のボックスに再度画像を表示します。
JavaScript
HTMLとCSSは先程のサンプルと同じなので、JavaScript のコードのみを表示・解説します。
var target = null;
window.onload = function() {
var drag = document.getElementById('drag');
var drop = document.getElementById('drop');
// drag側
drag.addEventListener('dragstart', function(e){
target = e.target;
}, false);
drag.addEventListener('drag', function(){
// 非表示
drag.style.display = 'none';
}, false);
// drop側
document.addEventListener('dragover', function(e){
e.preventDefault();
}, false);
document.addEventListener('drop', function(e){
e.preventDefault();
if (e.target.id == 'drop'){
e.target.appendChild(target);
}
// 表示
drag.style.display = 'block';
}, false);
}
赤字部分が今回のサンプルで追加(変更)された所です。赤字部分を上から順番に見ていきます。
まず「drag」イベントの最中に 、 img 要素に対して 「display: none」を設定しています。 この部分で画像を非表示にしています。
次に drop 側のコードですが、「document」に対してaddEventListener()メソッドを 実行しています。
document.addEventListener() とすることで、下側のボックスにドロップされた場合と、 そうでない場合の処理を分けることができます。
下側のボックスにドロップされた場合はappendChild() メソッドで追加します。
最後に img 要素に対して 「display: block」を設定してして、表示します。
このように記述することで、画像を移動中に「非表示」の状態にしています。