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」を設定してして、表示します。

このように記述することで、画像を移動中に「非表示」の状態にしています。

JavaScript入門