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

jQuery で要素をフェードインさせる方法

jQueryで要素をフェードインさせる

jQueryで要素をフェードインさせるには「fadeIn」にスピードを設定して使用します。

要素.fadeIn(スピード値);

スピード値:ミリ秒,"slow","normal","fast" 

例)$("#test").fadeIn(5000); // 5000msでフェードイン

jQuery + JavaScript ソース

「fadein_btn」というIDが付いたボタン要素をクリックすると「test_hako」というIDが付いた要素が5秒でフェードインします。 

<script type="text/javascript">
    $(function(){
        $("#test_hako").hide(); // 要素を一旦隠す
        $("#fadein_btn").click(function(){
            $("#test_hako").fadeIn(5000); // フェードイン
        });
    });
</script>

HTML

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

<p><input id="fadein_btn" type="button" value="BUTTON" /></p>
<div id="test_hako">箱</div>

CSS

CSSではフェードインする「test_hako」要素のスタイルを設定しています。 

#test_hako {
    background-color: #9C3;
    width: 100px;
    height: 100px;
    position: relative;
    color: #FFF;
    text-align: center;
    diplay: table-cell;
    virtical-align: middle;
}

サンプルの実行 

ボタン「BUTTON」を押すと黄緑色のボックスが5秒かけてフェードインします。 

結果

END

jQuery で要素のCSSを変更する方法

jQueryで要素のCSSを変更するには「css」にプロパティ名と値を設定します。

要素.css(プロパティ名,値);

例)$("p").css("background","red");

jQuery + JavaScript ソース

「test-botan3」というIDが付いた要素をクリックすると「sample27」というIDが付いた要素の背景色をCSSで黄色に変更しています。 

<script type="text/javascript">
    $(function(){
        $("#test-botan3").click(function(){
            $("#sample27").css("background","yellow");
        });
    });
</script>

HTML

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

<p><input id="test-botan3" type="button" value="BUTTON" /></p>
<div id="sample27">上のボタンを押すとこのテキスト行の背景色が黄色に変更されます。</div>

サンプルの実行 

ボタン「BUTTON」を押すとボタンの下にあるテキスト行の背景色が黄色に変更されます。 

結果

上のボタンを押すとこのテキスト行の背景色が黄色に変更されます。
END

JavaScript の基本 ~ 指定した日付の「曜日」を取得したい ~

~ 指定した日付の曜日を取得する ~

指定した日付の曜日を取得するには「getDay」メソッドを使用します。曜日は0~6の数値で返されます。

0:日曜日 1:月曜日 2:火曜日 3:水曜日 4:木曜日 5:金曜日 6:土曜日

// 指定した日付の曜日を取得する
例)var youbi = mydate.getDay();

JavaScript サンプルコード

var youbi_array = ["日","月","火","水","木","金","土"];
var mydate = new Date("2019-02-01");   // 2019年2月1日を指定
var youbi = mydate.getDay();
document.write(youbi_array[youbi] + "曜日ですよ");

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得したい ~

~ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得したい ~

1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得するには「Date.now()」メソッドを使用します。

// 現在までの経過時間をミリ秒で取得する
例)var genzai = Date.now();

JavaScript サンプルコード

var genzai = Date.now();
document.write(genzai);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 文字列をJavaScriptコードとして評価したい ~

~ 文字列をJavaScriptコードとして評価する ~

文字列をJavaScriptコードとして評価するには「eval」関数を使用します。

// 文字列(var a = "TEST";)をJavaScriptコードとして評価する
例)eval('var a = "TEST";');

JavaScript サンプルコード

eval('var a = "TEST";');
document.write(a);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 小数点以下を切り捨てたい ~

~ 小数点以下を切り捨てる ~

数値の小数点以下を切り捨てるには「Math.floor」関数を使用します。

// 数値「a」の小数点以下を切り捨てた後、結果を「kekka」に返す
例)var kekka = Math.floor(a);

JavaScript サンプルコード

var a = 9.9999;
var kekka = Math.floor(a);
document.write(kekka);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 小数点以下を四捨五入したい ~

~ 小数点以下を四捨五入する ~

数値を小数点以下で四捨五入するには「Math.round」関数を使用します。

// 数値「a」を小数点以下で四捨五入した結果(整数)を返す。
例)var kekka = Math.round( a );

JavaScript サンプルコード

var a = 1.85;
var kekka = Math.round(a);
document.write(kekka);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 乱数を発生させたい ~

~ 乱数を発生させる ~

乱数を発生させるには「Math.random」関数を使用します。乱数は浮動小数点で発生します。

// 0~100までの乱数を発生させる
例)var kekka = Math.random() * 100;

JavaScript サンプルコード

var kekka = Math.random() * 100;
document.write(kekka);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 絶対値を求めたい ~

~ 絶対値を求める ~

ある数値の絶対値を求めるには「Math.abs()」関数を使用します。絶対値とは「符号」を無視して得られる値です。

// 数値「a」の絶対値を求める
例)var kekka = Math.abs(a);

JavaScript サンプルコード

var a = -3.141592653;
var kekka = Math.abs(a);
document.write(kekka);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。

 

JavaScript の基本 ~ 特定の位置から最後までの文字を取得したい ~

~ 特定の位置から最後までの文字を取得する ~

ある文字列の特定の位置から最後までの文字を取得するには、引数を一つにして「slice」メソッドを使用します。

// 文字列の3文字目から最後までの文字を取得する
例)mojiretsu.slice( 2 ) ;

JavaScript サンプルコード

var mojiretsu = "Android";
var kekka = mojiretsu.slice(2);
document.write(kekka);

実行結果

※実行結果は掲載の「JavaScript サンプルコード」を使用して出力されています。