JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

 jQuery 版「要素をマウスで移動できるようにする方法」② ドラッグ移動版

要素をマウスで移動できるようにする

今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。

では、下のサンプルを試してみてください。

<サンプル>

下の要素(青いボックス)をマウスの左ボタンで押し、そのままマウスを移動すると要素がマウスの動きに合わせて移動します。 

ドラッグ可能

 

JavaScript + jQuery サンプルコード

コードは難しいものではありません。ポイントは要素をクリックしたマウスポインタの位置と要素の基準位置のズレを修正しているところです。

$(function() {
    //ドラッグフラグ
    var drag_flg = false;
    //マウスダウンの位置
    var pos1;
    var pos2;
    //要素位置の修正値
    var posX1;
    var posY1;
 
    //要素内でマウスボタンが押された場合
    $("#test_box").mousedown(function(evt1) {
  
        //ドラッグ判定(ドラッグしてない場合)
        if(drag_flg == false) {

            //要素の位置取得
            pos1 = $("#test_box").position();
            //要素位置を取得して修正値を計算
            posX1 = evt1.clientX - pos1.left;
            posY1 = evt1.clientY - pos1.top;
   
            //ドラッグ中にする
            drag_flg = true;
            //要素のテキストを変更
            $("#test_box").html("移動中…");
  
        //ドラッグ中の場合
        } else if(drag_flg == true) {
   
            //要素のドラッグを解除
            drag_flg = false;
            //要素のテキストを変更
            $("#test_box").html("ドラッグ可能");
        }
    });
 
    //要素上でマウスボタンが離された場合
    $("#test_box").mouseup(function() {
        //要素のドラッグを解除
        drag_flg = false;
        //要素のテキストを変更
        $("#test_box").html("ドラッグ可能");
    });

    //ドキュメント上でマウスポインタが動いた場合
    $(document).mousemove(function(evt2) {
        //ドラッグ中の場合
        if(drag_flg == true) {
            //要素位置をCSSで設定
            $("#test_box").css("left",(evt2.clientX - posX1));
            $("#test_box").css("top",(evt2.clientY - posY1));
        }
    });
});

HTML 

青いBOXは「DIV」要素で作られています。 

<body>
<div id="test_box">クリック</div>
</body>

CSS 

ポイントは要素の基準(position)を「absolute」に設定しているところと、ページのマージンを「0px」にしているところです。この2点の設定がないとマウスポインタと要素の位置にズレが出てしまいます。

#test_box {
    background-color:#39C;
    color: #FFF;
    text-align: center;
    padding: 30px;
    position: absolute;
    cursor: default;
    width: 80px;
    border-radius: 10px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}

備考・その他

今回のスクリプトには、まだドラッグ中(要素の移動中)に画面をスクロールさせると、マウスポインタと青いBOX要素の位置関係がズレてしまう問題が残っているので、完成させるにはその修正が必要になるでしょう。

END