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

 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;
  
        //ドラッグ中の場合
        } else if(drag_flg == true) {
   
            //要素のドラッグを解除
            drag_flg = false;
        }
    });

    //ドキュメント上でマウスポインタが動いた場合
    $(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;
}

備考・その他

今回は、クリックすることで要素の移動と固定を切り替えましたが、コードを少し変更するだけで「ドラッグ」動作に対応させることもできますので、次回以降にその方法を説明したいと思います。

END

jQuery で要素を非表示にする方法

~ 要素を非表示にする ~

jQueryで要素を非表示にするには「hide()」メソッドを使用します。

例)$("#youso").hide();    // 要素を非表示にする

HTML ソース

<p id="youso">Hello World</p>
<p><input id="btn" type="button" value="非表示にする" /></p>

JavaScript コード

ボタン(id=btn)を押すと要素(id=youso)が非表示になります。

$("#btn").click(function(){
    $("#youso").hide();
});

実行結果

Hello World

※このページの読み込みが完了してから試してください。

 

jQuery で要素にダブルクリックイベントを設定する方法

jQueryで要素にダブルクリックイベントを設定する

jQueryを使って要素にダブルクリックイベントを設定するには「.dblclick()」を使用します。()内には実行したいスクリプトを記述します。

要素.dblclick();

例)$("#btn").dblclick();  // id="btn"の要素にダブルクリックイベントを設定

jQuery + JavaScript ソース

「btn」というIDが付いたボタン要素をダブルクリックすると「olympic」というIDが付いた要素の内側のhtmlを書き換えます。

<script type="text/javascript">
    $(function(){
        $("#btn").dblclick(function(){
        $("#dinner").html("<strong></strong>");
        });
    });
</script>

HTML

HTMLは「input」ボタン要素と「div」要素で構成されています。 

<div id="olympic">2020年のオリンピック開催国は?</div>
<input id="btn" type="button" value="ダブルクリック" />

サンプルの実行 

ボタンを押すとボタン上部に回答が表示されます。 

結果
2020年のオリンピック開催国は?

END

jQuery で要素にクリックイベントを設定する方法

jQueryで要素にクリックイベントを設定する

jQueryを使って要素にクリックイベントを設定するには「.click()」を使用します。()内には実行したいスクリプトを記述します。

要素.click();

例)$("#btn").click();  // id="btn"の要素にクリックイベントを設定

jQuery + JavaScript ソース

「btn」というIDが付いたボタン要素をクリックすると「tenki」というIDが付いた要素の内側のhtmlを書き換えます。

<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
        $("#tenki").html("<strong>晴れ</strong>");
        });
    });
</script>

HTML

HTMLは「input」ボタン要素と「div」要素で構成されています。 

<div id="tenki">今日の天気は?</div>
<input id="btn" type="button" value="クリック!" />

サンプルの実行 

ボタンを押すとボタン上部のテキストが変わります。 

結果
今日の天気は?

END