JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年10月 / 09月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>11月

アクセスランキング

[ジャンルランキング]
コンピュータ
329位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
50位
アクセスランキングを見る>>

要素のドラッグ(IE,FF,GC対応)

要素をドラッグするためのライブラリは色々とありますが、とりあえず書いてみました。(ライブラリに頼るより、自分で書いたほうがスキルアップにも繋がりますし)
というわけで、コードを紹介します。
なお、Firefox6,IE8,Chrome13,Safari5にて動作を確認しました。


function getMousePosition(e){
    var obj = new Object();
    if (e){
        obj.x = e.pageX;
        obj.y = e.pageY;
    } else {
        obj.x = event.x + document.body.scrollLeft;
        obj.y = event.y + document.body.scrollTop;
    }
    return obj;
}

var isPressed = false;
var oldObj = new Object();
var objMoved;
function setMoveEventListener(obj,obj2){
    
    document.onmousemove = function(e){
        if (isPressed == true){
            objMoved.style.left = Number(objMoved.style.left.replace("px","")) + getMousePosition(e).x - oldObj.x + "px";
            objMoved.style.top = Number(objMoved.style.top.replace("px","")) + getMousePosition(e).y - oldObj.y + "px";
            oldObj = new Object();
            oldObj = getMousePosition(e);
            return false;
        }
    }
    
    document.onmouseup = function(e){
        if (isPressed == true){
            objMoved.style.left = Number(objMoved.style.left.replace("px","")) + getMousePosition(e).x - oldObj.x + "px";
            objMoved.style.top = Number(objMoved.style.top.replace("px","")) + getMousePosition(e).y - oldObj.y + "px";
        }
        isPressed = false;
        
    }
    
    obj.onmousedown = (function(obj){return function(e){
            if (e){
                e.preventDefault();
            }
            oldObj = new Object();
            oldObj = getMousePosition(e);
            if (typeof obj2 != "undefined"){
                objMoved = obj2;
            } else {
                objMoved = obj;
            }
            isPressed = true;
            return false;
        }
    })(obj);
    
    obj.onmouseup = (function(obj){return function(e){
            if (isPressed == true){
                objMoved.style.left = Number(objMoved.style.left.replace("px","")) + getMousePosition(e).x - oldObj.x + "px";
                objMoved.style.top = Number(objMoved.style.top.replace("px","")) + getMousePosition(e).y - oldObj.y + "px";
            }
            isPressed = false;
        }
    })(obj);
    
    if (obj.style.position == ""){
        obj.style.position = "absolute";
    }
    
    if (typeof obj.style.MozUserSelect != "undefined"){
        obj.style.MozUserSelect = "none";
    }
    
    if (typeof obj.draggable != "undefined"){
        obj.draggable = "false";
    }
    
    
    if (typeof obj2 != "undefined"){
        if (typeof obj2.style.MozUserSelect != "undefined"){
            obj2.style.MozUserSelect = "none";
        }
    }
    
}


使い方は、文書の内容が一通り読みこまれたあと、
setMoveEventListener(動かすオブジェクト←必須,第一引数のオブジェクトと同時に動かすオブジェクト←任意)

を実行するだけです。

一部、addEventListenerに置き換えた方が良い、という部分もあるかもしれませんが、一応これで動きます。

要素ドラッグサンプル

そのうち、ウィンドウからマウスポインタが出た場合に移動を止める処理と、前面・背面を入れ替える処理も入れたいと思います。

#いつのまにかFirefoxのバージョンが「6.0」になっていました。少し前まで4だったのに・・・
 


 
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

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