JavaScriptによるdrag&drop(ドラッグドロップ)

2010/04/27 05:19

JavaScriptによるドラッグアンドドロップは結構人気がありますが、全てのブラウザでまともに機能するソースはウェブ検索ではあまり出てこない様なので、以下に記載しておきます。

ご自由にコピーしてお使い下さい。

呼び出し方法は dragDrop.attach('ドラッグドロップ機能を付加したいエレメント'); です。

/*--ここから--*/

var dragDrop = {
    element:
        null
    ,
    mouseOffset:
        null
    ,
    mouseCoords:
        function(evt){
            if(evt.pageX || evt.pageY){
                return {x:evt.pageX, y:evt.pageY};
            }
            return {
                x:evt.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:evt.clientY + document.body.scrollTop  - document.body.clientTop
            };
    }
    ,
    getMouseOffset:
        function(e, evt){
            var ev = evt || window.event;
            var ePos = dragDrop.getPosition(e);
            var mousePos = dragDrop.mouseCoords(ev);
            return {x:mousePos.x - ePos.x, y:mousePos.y - ePos.y};
    }
    ,
    getPosition:
        function(e){
            var elm = e;
            var left = 0;
            var top = 0;
            while (elm.offsetParent){
                left += elm.offsetLeft;
                top += elm.offsetTop;
                elm = elm.offsetParent;
            }
            left += elm.offsetLeft;
            top += elm.offsetTop;
            return {x:left, y:top};
    }
    ,
    mouseMove:
        function(evt){
            ev = evt || window.event;
            var mousePos = dragDrop.mouseCoords(ev);
            var e = dragDrop.element;
            if(e){
                e.style.position = 'absolute';
                e.style.top = mousePos.y - dragDrop.mouseOffset.y + "px";
                e.style.left = mousePos.x - dragDrop.mouseOffset.x + "px";
                return false;
            }
    }
    ,
    mouseUp:
        function(){
            dragDrop.element = null;
    }
    ,
    attach:
        function(e){
            if (!e) {
                return;
            }
            e.onmousedown = function(evt){
                dragDrop.element = this;
                dragDrop.mouseOffset = dragDrop.getMouseOffset(this, evt);
                return false;
            }
    }
}
document.onmousemove = dragDrop.mouseMove;
document.onmouseup = dragDrop.mouseUp;

/*--ここまで--*/

※ ドラッグアンドドロップ対象のエレメントの親がdocumentではなく、親要素のエレメントであった場合、getPositionのwhile文をコメントアウトして下さい。

コメントを書く




biuquote
  • コメント
  • プレビュー
Loading