JavaScript_共通関数 - mtsnotes @ ウィキ

document.getElementById のショートカット

var $ = document.getElementById;

ページ内の要素を移動できるようにする関数

// 
// ■使用方法
// porter(document.getElementById(移動できるようにしたい要素のID));
// 
var porter = function(element) {

    var dragFlg;
    var dragStartX;
    var dragStartY;
    
    var dragStart = function() {
        dragStartX = event.clientX - element.offsetLeft;
        dragStartY = event.clientY - element.offsetTop;
        dragFlg = true;
    };
    
    var dragEnd = function() {
        dragFlg = false;
    };

    var dragProcess = function() {
        if(dragFlg) {
            element.style.top = event.clientY - dragStartY;
            element.style.left = event.clientX - dragStartX;
        }
        return false;
    };
    
    element.style.position = "absolute";
    element.attachEvent("onmousedown", dragStart);
    document.attachEvent("onmousemove", dragProcess);
    document.attachEvent("onmouseup", dragEnd);
};