[JavaScript]単純なドラッグドロップだけを提供するライブラリ / LiosK-free Blog

[JavaScript]単純なドラッグドロップだけを提供するライブラリ

2007-06-24
カテゴリ: Client Side
タグ: JavaScript インターフェース設計 Tips

var Draggable = function(elm, opt) {
    if (typeof elm == 'string') elm = document.getElementById(elm);
    opt = opt || {};
    elm.onmousedown = function(e) {
        e = e || event;
        var x = e.clientX - parseInt(elm.style.left);
        var y = e.clientY - parseInt(elm.style.top);
        document.onmousemove = function(e) {
            e = e || event;
            elm.style.left = (e.clientX - x) + 'px';
            elm.style.top  = (e.clientY - y) + 'px';
            return false;
        }
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
            if (typeof opt.endeffect == 'function') opt.endeffect(elm);
            return false;
        }
        if (typeof opt.starteffect == 'function') opt.starteffect(elm);
        return false;
    }
}

ちょっとした理由で使うので、JavaScriptでドラッグ & ドロップを実現する関数を書いた。

ただ単に、エレメントをマウスでぐりぐり動かせるだけの単純なものです。たったこれだけのために、prototype.js + script.aculo.usを読み込むのも萎えるときのために。

一応、手元のIE6, Firefox2, Opera9, Safari3betaで動作確認済み。シンプルな関数なので制約も多いですが、用途に合わせて改造して使ってもらえると良いと思います。

how to use

このボックスは動きます。

var opt = {
    starteffect: function(elm) { elm.style.color = 'red'; },
    endeffect: function(elm) { elm.style.color = 'black'; }
}

new Draggable('draggable', opt);

script.aculo.usのDraggableと同じように呼び出すだけです。ただし、オプションは、starteffectとendeffectだけに対応しています。

制約

ドラッグさせるエレメントは、position:absolute または position:relativeを指定されていて、かつ、leftとtopをピクセル単位で指定されていないといけません。

また、ドラッグさせるエレメントのonmousedownイベントと、document.onmousemove と document.onmouseupを指定しているとバグります。

LiosK-free Blog