TD内のチェックボックスの位置情報(X,Y)を取得するには？

Question

お世話になります。

マウスドラッグで範囲選択したブラウザ内のチェックボックスに、一括してチェックを入れるWEBアプリケーションを作成しております。

そこで、大きく2つ質問があります。

■質問 1
TABLEのTD内に存在する複数のチェックボックスのうち、特定のチェックボックスの位置情報をonMouseUpで取得したいと思っています。
styleシートで予め各チェックボックスに絶対位置を書いておけば可能かと存じますが、それ以外の方法で、可能なものがあればご教授頂きたいと思います。

■質問 2
質問 1が前提になるのですが、ブラウザの左上端(0,0)から、onMouseUpで取得したチェックボックスの（x,y）までに含まれる全てのチェックボックスのオブジェクトを取得したいと思っています。
これについてもヒント、もしくは参考になるソースなどがございましたら、是非にご紹介頂ければ幸いです。

以上になります。
よろしくお願い申し上げます。

dennou2000 · Accepted Answer

■質問 1に対する回答 onMouseUpイベントのイベントプロシジャ内で、「eventオブジェクト」を参照すると、そのイベントが発生した座標をプロパティとして参照できます。 event.clientX／ event.clientY：イベント発生時のクライアント座標(タイトルバーを除くウィンドウ内の座標） event.screenX／ event.screenY：イベント発生時の画面上での座標 event.offsetX／ event.offsetY：イベント発生時の要素上の座標 event.pageX／ event.pageY：イベント発生時のページ上の座標 (window.event.～～～で参照した方がいいかも知れません。） ■質問２に対する回答多少工夫がいりますが、できることはできます。１）チェックボックスの定義をnameは同一、idで識別するようにする。　　例：　　　　　　　　２）１）のチェックボックス群は、以下の文でnameが同一の範囲のものは一括取得できます。　　　　document.all("CB") ３）onMouseUpイベントのイベントプロシジャの中で、「eventオブジェクト」を参照すると、その　　イベントが発生したオブジェクトがevent.srcElementプロパティで参照できます。　　これで２）で一括取得したオブジェクトを、左記のevent.srcElementプロパティで得られる　　オブジェクトまでで限定をかけます。試みに書いたＨＴＭＬは、こんな感じです。－－－－－－－－－－－ event.html －－－－－－－－－－－－－－－－－－－－－－－－－イベントＨＴＭＬ

チェックボックス１
チェックボックス２
チェックボックス３
チェックボックス４
チェックボックス５
チェックボックス６
チェックボックス７
チェックボックス８
チェックボックス９

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ ※　オブジェクトの取得の方は、厳密には原点座標からの矩形の範囲にあるオブジェクトを　　取得している事にはなりません。　　完全に矩形の範囲で採ろうとする－－例えば、格子状にチェックボックスが並んでいる　　等の場合は、ＩＤの付与の仕方をxxyyの様な形にして、event.srcElementプロパティで　　得られるオブジェクトのＩＤ　XXYYからXX、YYよりも小さい値のＩＤを持つオブジェクト　　に限定するという手法が考えられます。 ≪受付中のままにしないで、ちゃんと質問は締め切りましょう≫

bot · Answer

こんにちは。
　下記リンクのソフト（IEの右クリック登録ツール）で利用されているソースが参考になるかもしれません。
　例えば、「辞書 Yahoo!」 を登録し、IEの右クリックから 「辞書 Yahoo!」 を実行するとダイアログが表示されます。
その上では次のような操作が可能です。

 - マウス左ボタンで範囲選択 ：チェックボックスのチェックを付ける
 - マウス右ボタンで範囲選択 ：チェックボックスのチェックを外す
 - マウスホイールボタン回転 ：チェックの移動

「辞書 Yahoo!」のソース dicMULTI_Yahoo.html 

　- getcoordinate ：エレメントの座標を取得する関数
　- docmousedown, docmouseup, docmousemove ：四角を描写したりする関数

参考URL：http://pls.xrea.jp/PasMenu/

TD内のチェックボックスの位置情報(X,Y)を取得するには？

■質問 1に対する回答

こんにちは。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング