イベント・UI：
Node操作時のポインタ位置を取得
指定Node上で mousedown / mousemove / mouseupイベントが発生した際の座標を取得。
タッチデバイスの場合は、touchstart / touchmove / touchendイベント発生時の座標を取得。
この関数を使用する場合、まずは$getPointInit()で初期化する必要がある。
Node
Nodeを指定 id値を文字列で指定してもよい
String1
イベントの種類を指定 start = 開始時 ・ move = 移動時 ・ end = 終了時
- ※上記のPC/スマホ共通で使用できる独自の省略形の他に、標準予約語のイベント名でも指定可能。
- 【start】mousedown ・ touchstart 【move】mousemove ・ touchmove 【end】mouseup ・ touchend
String2
取得するX値・Y値を指定 省略した場合は両方を配列で取得
X or 0 = X値のみ ・ Y or 1 = Y値のみ ／ 大文字・小文字で指定可能
X or 0 = X値のみ ・ Y or 1 = Y値のみ ／ 大文字・小文字で指定可能
●必須引数 ●オプション引数(省略可能)
記述例
$getPoint($id('aNode'), 'start')
$getPoint('aNode', 'mouseup')
$getPoint('aNode', 'end', 'Y')
$getPoint('aNode', 'end', 1)
戻り値
○第3引数を指定した場合
・指定した軸の座標を数値で返す。
○第3引数を省略した場合
・ページ左上からのX座標とY座標を配列で返す。
配列[0]：X座標
配列[1]：Y座標
動作サンプル
指定したNodeの範囲内でポインタ操作(mousedownやドラッグ動作など)を行なって、各イベント時の座標を記録・確認。
Javascript :
$getPointInit($id('area1')); //まずは、監視モニターを起動する
var startPos=$getPoint($id('area1'),'start');
var movePos=$getPoint($id('area1'),'move');
var endPos=$getPoint($id('area1'),'end');
var startX=$getPoint($id('area1'),'start','X');
var endX=$getPoint($id('area1'),'end','Y');
指定したNodeの範囲内でポインタ操作(mousedownやドラッグ動作など)を行なって、各イベント時の座標を記録・確認。
Javascript :
$getPointInit('area2'); //まずは、監視モニターを起動する
var startPos=$getPoint('area2','mousedown');
var movePos=$getPoint('area2','mousemove');
var endPos=$getPoint('area2','mouseup');
var startX=$getPoint('area2','mousedown',0);
var endX=$getPoint('area2','mouseup',1);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。