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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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を指定しているとバグります。

スポンサーサイト

関連記事

トラックバック URL

http://liosk.blog103.fc2.com/tb.php/18-6a7c4af2

トラックバック

コメント

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。