イベント・UI：
NodeをDrag&Dropで移動する
任意のNodeをDrag&Dropできるようにする。$startMouseMonitor() を併用。
スマホ用の可動範囲をpx_vw値で指定することも可能。
String1
id値を渡す Node渡しは不可
String2
動きのタイプを指定 LR = 左右 ・ TB = 上下 ／ 大文字・小文字で指定可能
Number1
PC用：可動範囲の最小値を指定 px値
Number2
PC用：可動範囲の最大値を指定 px値
Number3
スマホ用：可動範囲の最小値を指定 px_vw値 ➜『px_vw値』とは？
Number4
スマホ用：可動範囲の最大値を指定 px_vw値
●必須引数 ●オプション引数(省略可能)
記述例
$ddHandler('aNode', 'LR', 0, 300)
$ddHandler('aNode', 'TB', 0, 300, 0, 120)
◆ ドラッグさせるNodeのHTMLおよびCSSで以下の設定をする
❶ ドラッグさせたいNodeにCSS「position: absolute;」を設定。
❷ 対象Nodeのイベントハンドラに「onmousedown="$ddHandler(…)"」を設定。
※タッチデバイス対応にする場合は「ontouchstart」にも設定。
❸ ポインタのポジションを取得する $startMouseMonitor() を起動。
※タッチデバイス対応にする場合は引数ありの $startMouseMonitor(true) として、不要な属性を削除する。
❶ ドラッグさせたいNodeにCSS「position: absolute;」を設定。
❷ 対象Nodeのイベントハンドラに「onmousedown="$ddHandler(…)"」を設定。
※タッチデバイス対応にする場合は「ontouchstart」にも設定。
❸ ポインタのポジションを取得する $startMouseMonitor() を起動。
※タッチデバイス対応にする場合は引数ありの $startMouseMonitor(true) として、不要な属性を削除する。
注意点
可動範囲は、指定Nodeのleft値(縦の場合はtop値)を考えて指定する。動作サンプルのようなスライダーの場合には、可動最大値はドラッグ領域となるバーの全幅からつまみ幅を差し引いた数値となる点に注意。
スクロール時の処理は、外部にFunctionとして『ddHandlerLR(nowX,tarId) ／ ddHandlerTB(nowY,tarId)』を必要に応じて用意し、その中で処理する。引数『nowX／nowY』には現在のドラッグ量が、引数『tarId』には対象Nodeのid値が渡される。ページ内に複数のドラッグ要素を配置する場合には、tarIdで分岐して処理する。
縦方向にスクロールさせる場合、スマホなどのタッチデバイスでは指定Nodeではなくページ自体が縦スクロールしてしまう場合があるので注意して使用すること。
動作サンプル
横方向のDrag&Dropサンプル。ドラッグ量をパーセントで表示：0%
HTML :
<body onload="$startMouseMonitor(true)">//ポインタの位置を取得できるように起動する
<div id="sample1">
<div id="knob1" onmousedown="$ddHandler('knob1','LR',0,480,0,240)" ontouchstart="$ddHandler('knob1','LR',0,480,0,240)"></div>
</div>
Sass :
#sample1 {
position: relative;
width: 600px;
height: 28px;
#knob1 {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 28px;
}
}
Javascript :
function ddHandlerLR(nowX,tarId) {
if(tarId=="knob1") {
var perStr=Math.round(nowX/480*100)+"%";
$toHTML("knob1_status",perStr);
}
}
縦方向のDrag&Dropサンプル。ドラッグ量をパーセントで表示：0%
HTML :
<body onload="$startMouseMonitor()">//ポインタの位置を取得できるように起動する：PCのみ対応
<div id="sample2">
<mark id="knob2" onmousedown="$ddHandler('knob2','tb',0,200)"></mark>
</div>
Sass :
#sample2 {
position: relative;
width: 28px;
height: 280px;
#knob2 {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 80px;
}
}
Javascript :
function ddHandlerTB(nowY,tarId) {
if(tarId=="knob2") {
var perStr=Math.round(nowY/200*100)+"%";
$toHTML("knob2_status",perStr);
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。