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

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

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

前回までの話

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

実装方法

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

サンプル実装

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

index.html

<html>
    <head>
        <meta charset="UTF-8" />
        <title>オブジェクト移動サンプル２</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();

実行結果

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

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行目で、拡大縮小を可能にします。付与するオプションやイベントは下記になります。