WEBページの要素をドラッグ&ドロップで拡大縮小、移動したい!②

この記事は2016年3月16日に書かれたものです。内容が古い可能性がありますのでご注意ください。


WEBページのオブジェクトをドラッグ&ドロップで拡大縮小、移動したい!

WEBページを作成する際に、ドラッグ&ドロップで画像等のどこか一部を拡大縮小したい、または移動したいと思ったことはありませんか。マウスの位置を取得して動いた距離を画像に反映して…なんてことしなくても簡単にできます!

前回までの話

前回の記事(WEBページの要素をドラッグ&ドロップで拡大縮小、移動したい!①)では、オブジェクトを移動と拡大縮小は、jQuery UIのライブラリの「Resizable」と「Draggable」を使用すると実装することができることがわかりました。
また、オプションを指定することで動きを指定することができるということがわかりました。
しかし、やりたいことはそれだけではないはず!やはりドロップ先を指定したい!
今回はその実装をしていきます。

実装方法

今回もjQuery UIのライブラリを使用して実装します。
新たに使用するライブラリは、「Droppable」です。
使用方法はドロップ先の要素に「Droppable」を付与し、グループ化とドロップ要素の許可をするだけです。

サンプル実装

サンプル実装していきます。今回もjQuery、jQuery UI、画像はコードに書いてあるパスに配置してくだいさい。。

index.html

<html>
    <head>
        <meta charset="UTF-8" />
        <title>オブジェクト移動サンプル2</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css"/>
        <link rel="stylesheet" type="text/css" href="./jquery/jquery-ui.min.css"/>
        <script src="./jquery/jquery-2.1.4.min.js"></script>
        <script src="./jquery/jquery-ui.min.js"></script>
    </head>
    <body>
        <div id="dropArea">
        </div>
        <div>
            <span>下記の画像を青い領域にドラッグ&ドロップする。</span>
        </div>
        <div id="targetImgDiv">
            <img id="targetImg" src="./img/star.png"></img>
        </div>
        <script src="./js/index.js"></script>
    </body>
</html>

css/index.css

#dropArea {
    height:300px;
    width:300px;
    background-color:blue;
}

#targetImg {
    height:50px;
    width:50px;
}

js/index.js

function init() {
    $("#targetImgDiv").draggable({
        helper:"clone",
        revert:"invalid",
        opacity:0.5,
        scope:"scopeGroup"
    });

    $("#dropArea").droppable({
        accept:"#targetImgDiv",
        scope:"scopeGroup",
        drop:function(event,ui) {
            var imgDiv = $('<div class="insertImg" style="position:absolute;top:' + ui.position.top + 'px;left:' + ui.position.left + 'px"></div>');
            var img = $('<img src="./img/star.png">');
            imgDiv.append(img);
            $("#dropArea").append(imgDiv);
            
            $(img).bind("load", function(){
                $(img).resizable({
                    maxHeight:100,
                    maxWidth:100,
                    minHeight:30,
                    minWidth:30,
                    aspectRatio:true
                });
                
                $(imgDiv).draggable({
                    opacity:0.5,
                    containment:"#dropArea"
                });
            });
        }
    });
}

window.onload = init();

実行結果
実装1
実装2
実装3

前回のオプションのおさらいをしつつ、プログラムを追っていきましょう。

index.js 2~7行目

ドラッグ元の画像に対し、移動を可能にしていきます。
付与するオプションやイベントは下記になります。

  • helper:”clone”
  • 移動する要素は、要素そのものではなくコピーを移動するように指定します。

  • opacity:0.5
  • 移動中の要素の透明度を0.5にします。

  • revert:”invalid”
  • ドロップ可能な領域以外にドロップされた際は、元の要素の位置にアニメーションで戻ります。

  • scope:”scopeGroup”
  • ドロップ可能な要素を追加するためのグループ名を指定します。今回のグループ名は、「scopeGroup」にそろえます。

index.js 9~12,32~33行目

ドロップ先の要素を指定します。この指定により移動可能な領域を制御します。
付与するオプションやイベントは下記になります。

  • accept:”#targetImgDiv”
  • ドロップ可能な要素を指定します。今回は、「index.js 2~7行目」で移動の設定をした「#targetImgDiv」のドロップを許可します。

  • scope:”scopeGroup”
  • ドロップ可能な要素を追加するためのグループ名を指定します。今回のグループ名は、「scopeGroup」にそろえます。

  • drop:function(event,ui) {}
  • ドロップされたときのイベント処理を付与します。イベント内の処理については下記の「index.js 13~31行目」に記載します。

index.js 13~31行目

ドロップ可能領域にドロップされた後の処理を記述します。
13~16行目でドロップ先の要素に新たに要素を作成します。ドラッグしている要素「#targetImgDiv」のオプションで「revert:”invalid”」を指定しているので、ドロップ可能な領域であれば元の位置に戻ってこないはずなのですが消えてしまいます…。そのため、位置情報から要素を挿入しています。ちなみに、ドロップ不可領域に移動した場合は、元の元の位置にアニメーションでしっかり戻ります。
18~31行目で、イメージload後にドロップ領域内での動きを指定します。
19~25行目で、拡大縮小を可能にします。付与するオプションやイベントは下記になります。

  • maxHeight:100
  • 拡大時の高さの最大値を100pxに指定します。

  • maxWidth:100
  • 拡大時の幅の最大値を100pxに指定します。

  • minHeight:30
  • 縮小時の高さの最小値を30pxに指定します。

  • minWidth:30
  • 縮小時の幅の最小値を30pxに指定します。

  • aspectRatio:true
  • 高さと幅の比率を維持して、拡大縮小時に画像が横長や縦長にならないようにします。

27~30行目で、移動を可能にします。付与するオプションやイベントは下記になります。

  • opacity:0.5
  • 移動中の要素の透明度を0.5にします。

  • containment:”#dropArea”
  • 移動できる範囲を「#dropArea」内に限定します。

終わりに

要素の拡大縮小や移動についてコードをあまり書かなくても実装できることがわかりました。要素を移動したい等の要件が出た場合には参考にしていただければと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP