jQueryUIのDraggable（ドラッガブル）とはこんな奴だ。 簡単なサンプルプログラムを作ってみた。
jQueryUIのDraggableの例
一方、Toggleの例はこんな感じ。特定の要素の表示・非表示を切り替える事が出来る。
jQueryUIのTogggle()の例
この記事では、jQuery UI で使えるDraggableとToggleの機能を紹介しよう。
これらの小技を覚えておくと、WEBページにアニメーションなどの動きのある効果を導入できるので何も動かない簡素なページ比べてダイナミックな雰囲気のあるページを作成する事が出来る。
皆さんも覚えておくと良いだろう。
では本題に入ろう。
jQueryUIのDraggableの使い方
上で紹介したjQueryUI Draggableのサンプルの全HTMLコードは以下の通り。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="./Scripts/jquery-ui.min.css" rel="stylesheet" />
<script src="./Scripts/jquery-3.3.1.min.js"></script>
<script src="./Scripts/jquery-ui-1.12.1.min.js"></script>
</head>
<body>
<input type="button" id="buttonPagePeload_ID" value="やり直す" onClick="window.location.reload()">
<div id="MyBody_ID">
<div id="MyDraggable_ID">任意の場所にドラッグ移動出来る</div>
<div id="MyDraggable1y_ID">↑↓縦にドラッグ移動出来る</div>
<div id="MyDraggable2x_ID">←→横にドラッグ移動出来る</div>
<div id="MyContainer3_ID">
<div id="MyDraggable3_ID">青いボックスの中を移動出来る [scroll=false]</div>
<div id="MyDraggable4_ID">青いボックスの中を移動出来る [scroll=true]</div>
</div>
</div>
<script>
$(function () {
$('#MyDraggable_ID').draggable({});
$('#MyDraggable1y_ID').draggable({ axis: 'y' });
$('#MyDraggable2x_ID').draggable({ axis: 'x' });
$('#MyDraggable3_ID').draggable({ containment: '#MyContainer3_ID', scroll: false });
$('#MyDraggable4_ID').draggable({ containment: '#MyContainer3_ID', scroll: true });
});
</script>
<style>
#buttonPagePeload_ID {
position:fixed;
}
#MyBody_ID {
padding-top:30px;
}
div[id^=MyDraggable] {
width: 150px;
height: auto;
margin: 20px;
border: 5px solid red;
}
#MyContainer3_ID {
width: 90vw;
height: 300px;
border: 5px solid blue;
overflow: scroll; /* scroll: trueに必要 */
}
</style>
</body>
</html>
jQueryUI Draggableのサンプルの全HTMLコード
もし自分でも試してみたい人は、このコードを test.html などの適当なファイル名で保存してブラウザーで読み込んでみると良い。
注意事項としてはHTMLファイルの冒頭で
<meta charset="utf-8" />
のように文字コードを指定しているので、ファイル保存する場合の文字コードはUTF-8にする事。それ以外だと文字化けする。
jQueryUI Draggableのサンプルコードの解説
まず、HTMLの冒頭で必要なファイルを読み込む。
<link href="./Scripts/jquery-ui.min.css" rel="stylesheet" /> <script src="./Scripts/jquery-3.3.1.min.js"></script> <script src="./Scripts/jquery-ui-1.12.1.min.js"></script>
一行目はjQuery UIに必要なCSSファイル。
このファイルは三行目に読み込むjQueryUI本体よりも先に読み込む必要がある。
二行目はjQueryの本体だ。
三行目がjQueryUIの本体。
上の例では、これらの三つのファイルは公式サイトからダウンロードしたものをローカルに保存して利用している。
もちろんローカルに保存せずに、公式サイトにリンクを張って直接利用する方法でも構わない。
これらの三つのファイルを読み込むとjQueryUIの各種の機能を利用する事が可能だ。
Draggebleで移動する要素を定義する
<input type="button" id="buttonPagePeload_ID" value="やり直す" onClick="window.location.reload()"> <div id="MyBody_ID"> <div id="MyDraggable_ID">任意の場所にドラッグ移動出来る</div> <div id="MyDraggable1y_ID">↑↓縦にドラッグ移動出来る</div> <div id="MyDraggable2x_ID">←→横にドラッグ移動出来る</div> <div id="MyContainer3_ID"> <div id="MyDraggable3_ID">青いボックスの中を移動出来る [scroll=false]</div> <div id="MyDraggable4_ID">青いボックスの中を移動出来る [scroll=true]</div> </div> </div>
一行目で定義しているのはボタン。
このボタンをクリックするとページをリロード出来るので、最初から実験を繰り返す事が出来る。
その次の、<div id=”MyBody_ID”> の中に入っている5個のdiv要素がDraggableで移動対象となるものだ。
以下のように割り当てている。
- MyDraggable_ID 任意の場所にドラッグ移動出来る
- MyDraggable1y_ID ↑↓縦にドラッグ移動出来る
- MyDraggable2x_ID ←→横にドラッグ移動出来る
- MyContainer3_ID MyDraggable3_IDの移動範囲を制限するDIV
- MyDraggable3_ID 青いボックスの中を移動出来る [scroll=false]
- MyDraggable4_ID 青いボックスの中を移動出来る [scroll=true]
要素にDraggableの設定を行う
<script>
$(function () {
$('#MyDraggable_ID').draggable({});
$('#MyDraggable1y_ID').draggable({ axis: 'y' });
$('#MyDraggable2x_ID').draggable({ axis: 'x' });
$('#MyDraggable3_ID').draggable({ containment: '#MyContainer3_ID', scroll: false });
$('#MyDraggable4_ID').draggable({ containment: '#MyContainer3_ID', scroll: true });
});
</script>
一行目のように単純に.draggable({}); とすると、その要素は任意の場所にドラッグ可能になる。
二行目や三行目のようにx,yで方向を指定すると、要素はその方向にしか移動出来ないよに制限出来る。
四行目は、containment:で指定した親要素 ‘#MyContainer3_ID’ の中でしか移動出来ないように制限している。scroll=trueにすると、親要素の範囲外に移動しようとした場合にスクロールバーが出て無限に移動出来る。ただし、親要素に
overflow: scroll; /* scroll: trueに必要 */
の設定が無い場合には、scroll=true にしていてもfalseと同じ動作になった。
また、Chrome, Firefox, Edgeではscroll=trueの設定が効くのだが、IE10の場合にはtrueにしてもfalseと同じ動きになった。
一方、scroll=falseの場合にはスクロールバーが必要な領域までは移動出来ない。
以上でjQuery UIのDraggableの解説は終わり。
jQuery Toggle()の機能を使う
今回紹介したjQuery Toggle()の全サンプルコードだ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="./Scripts/jquery-ui.min.css" rel="stylesheet" />
<script src="./Scripts/jquery-3.3.1.min.js"></script>
<script src="./Scripts/jquery-ui-1.12.1.min.js"></script>
</head>
<body>
<div>
<input type="button" id="buttonToggle1_ID" value="クリックで表示／非表示 [シンプル]">
</div>
<div>
<input type="button" id="buttonToggle2_ID" value="クリックで表示／非表示 [効果有り]">
<label>効果を選択する</label>
<select name="effects" id="effectTypes">
<option value="">なし</option>
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select>
</div>
<div id="divToggleTarget_ID">
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>
<script>
$(function () {
var buttonToggle_ID = document.getElementById('buttonToggle1_ID');
buttonToggle_ID.onclick = function (ev) {
var divToggleTarget_ID = $('#divToggleTarget_ID');
var isVisible = divToggleTarget_ID.is(':visible');
if (isVisible) {
divToggleTarget_ID.hide();
} else {
divToggleTarget_ID.show();
}
};
});
// debugger;
$(function () {
// 選択した効果を使ってtoggleを実行する
function runEffect() {
// selectから選択中の効果を読み取る
var selectedEffect = $('#effectTypes').val();
// 多くの効果はoptions値を与える必要は無いが
var options = {};
// 幾つかの効果はoptionsパラメータが必要なので適当に与える
if (selectedEffect === 'scale') {
options = { percent: 50 };
} else if (selectedEffect === 'size') {
options = { to: { width: 200, height: 60 } };
}
// 選択効果を使ってtoggleを実行する
if (selectedEffect === '') {
$('#divToggleTarget_ID').toggle();
} else {
$('#divToggleTarget_ID').toggle(selectedEffect, options, 500);
}
};
// ボタンクリックのイベントハンドラ関数
$('#buttonToggle2_ID').on('click', function () {
runEffect();
});
});
</script>
<style>
#divToggleTarget_ID{
border:5px dotted magenta;
width:200px;
}
</style>
</body>
</html>
jQueryUI Toggleの基本
単純に特定の要素の表示・非表示を切り替えたいならば、以下のコマンドを実行すれば良い。
$('#divToggleTarget_ID').toggle();
これによって、今、その要素（divToggleTarget_ID）が表示されていれば非表示する。
もし、その要素が非表示ならば表示すると言う動作になる。
ワテの場合、このtoggleの存在を知らない時期が有ったのだが、その時には、以下のような小細工を使っていた。
var buttonToggle_ID = document.getElementById('buttonToggle1_ID');
buttonToggle_ID.onclick = function (ev) {
var divToggleTarget_ID = $('#divToggleTarget_ID');
var isVisible = divToggleTarget_ID.is(':visible');
if (isVisible) {
divToggleTarget_ID.hide();
} else {
divToggleTarget_ID.show();
}
};
要するに、その要素が今 Visible（見えているか）かどうか調べる。
それに応じて、show()やhide()を実行していたのだ。
まあこれでも出来るのだが、toggle()を使うとif判定も不要なので簡単。
jQueryで要素が見えているかどうか判定する方法
ちなみに、HTMLプログラミングに於いて、要素が見えているのかどうか判定する方法はいろんな手法があるようだ。
また、時代によっても異なるみたい。
ワテが調べた限りでは、2018/1現在はjQueryを使って以下のコマンドを実行するのが確実のようだ。
var isVisible = divToggleTarget_ID.is(':visible');
要素が見えているかどうかの判定は実は難しい
なお、jQueryのtoggle()やhide()の機能を使って要素を非表示にした場合には
display:none;
になる。
確かに、display:noneに設定すると確実にその要素を非表示に出来る。
ところが、要素が見えていない状態と言うのは、必ずしもdisplay:noneとは限らない。
例えば、width=0, height=0 の場合でも見えない。
あるいは、幾つかの要素が重なっていて、目的の要素にz-indexに小さな値を与えると、他の要素の下に隠れている場合もある。
あるいは、その要素の透明度100%にすると完全に透けているので大きさを持っていても画面上では見えない。
なので、これらの状況も全て考慮する「実際に要素が見えているのかどうかの判定方法」を実装するのは、かなり面倒なのだ。
でも検索してみると、そう言う用途に使えるオープンソースなライブラリもあったと思うので興味ある人は探してみると良いだろう。
キーワードは isHidenなどので検索してみると良い。
まとめ
jQuery UI の DraggableとjQueryのtoggle, show, hideの機能を紹介した。
前者のjQuery UI の Draggableを初めて使った人は、こんなに簡単に要素をマウスでドラッグ移動出来るのか！と感心するだろう。
ワテもそうだった。
ワテ自作のワレコマップでは、地図域とストリートビュー域の境界にある分割線をjQuery UI Draggableで実装している。
当初はDraggableなどと言うそんな便利な機能があるのを知らなかった、自前でDraggable風の機能を実装しようとしていた。
マウスポインターのx､y座標を読み取って要素の位置をposition:absolute指定して
position:absolute; left:x; top:y;
みたいに。
まあ、やれば出来るとは思うが、プログラミングの世界では有る物は使うほうが手っ取り早い。
世の中、多くの人がいる訳なので、自分が必要としているような機能を持つライブラリは探せば必ずあるだろう。
一週間くらい検索しまくっても見付けられない場合には、諦めて自分で作っても良いと思うが。
プログラミングをやるなら、兎に角、最短時間で目的の機能を持つプログラムを完成させる事が重要だ。
最適化がどうのこうのとか、コーディングスタイルが美しくないとか、そんな事を言っている場合では無い。
ワテの経験では、出来ないプログラマーに限って、結果を出せないのに、言い訳が多い。
本を読む
ワテ推薦のワイヤレスマウス
見た目は地味で普通だが、WEBホイールと言うクルクル勢いよく回るホイールが格別に使い易いのだ。値段も手ごろだし。
コメント