jQueryでドラッグアンドドロップ

jQueryを使って、drag and dropをやってみた。

jQuery UIについて

jQueryのプラグインで、 jQuery UIというものがあって様々なUIを提供している。こちらを使えばjQueryオブジェクトをドラッグ可能にできる。さまざまなオプションも簡単に指定できる。
jQuery UI
jQuery UIを利用するには？ – Build Insider
Draggable | jQuery UI
Draggable – jQuery UI API 1.8.4 日本語リファレンス – StackTrace

今回は jQuery UIなしで

今回は、シンプルにマウスダウンしたらドラッグ開始、マウスアップしたらドラッグ終了というのを作った。

オレンジの図形をドラッグして動かす事が出来る。
以前、CreateJSを使ってやったドラッグアンドドロップ（CreateJSを使ってみる – 図形のドラッグ）では、canvasを使用している。
今回動かすのは、div要素にidを割り当てて、CSSのbackground-colorで色を付けた矩形。
CSSのプロパティleft, topを使って移動させた。

注・今回のデモはタッチイベントに対応していない。なので、「CreateJSを使ってやったドラッグアンドドロップ（CreateJSを使ってみる – 図形のドラッグ）」と違って、スマートフォンでは図形をうごかせない。

HTML

sprite-01が動かす図形。my-stageが図形が動くステージ。その外側を、my-containerが囲む。
my-stage上でマウスが動いているときドラッグにしていたが、それではマウスが外に出てドラッグ終了となったときに図形がはしっこま寄らずに止まってしまう。そこで、さらに外側を囲むmy-containerを用意して、そこをマウス移動に反応する領域に設定した。

<div id="my-container">
    <div id="my-stage">
        <div id="xy-data">x: 130 y: 30</div>
        <div id="sprite-01"></div>
    </div>
</div>

CSS

sprite-01のpositionを、my-stageを基準にしたabsoluteにする。

#my-stage {
    position:relative;
    ……略……
}
#sprite-01 {
    position:absolute;
    ……略……
}

javascript

javascript側では、sprite-01でマウスボタンが押された(mousedown)なら、そのあとのマウスイベントをくっつける。
マウスが動いた(mousemove)とき、マウスボタンが離されたとき(mouseup)、マウスが所定の要素（今回はmy-container）から離れた(mouseleave)とき。mouseupかmouseleaveでドラッグは終了と判断して、mousemove,mouseup,mouseleaveを取り外す。

$("#sprite-01").mousedown(function() {
    $("#my-container").mousemove(function(event){
        // 移動処理
    });
    
    $("#my-container").mouseleave(function(){
        $(this).unbind("mouseup mousemove mouseleave");
    });
    
    $("#my-container").mouseup(function(){
        $(this).unbind("mouseup mousemove mouseleave");
    });
});