 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤーのドラッグ設定・解除
|
・サイトマップ [Shift-S] |
 |
■ レイヤーのドラッグ設定・解除：kl_drag_set()
レイヤーをドラッグできるようにするサンプルです。
-----------------------------------------------------------------------------
■ kl_drag_set(id)：レイヤーにドラッグハンドラを設定
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
■ kl_drag_clear(id)：レイヤーのドラッグハンドラを解除
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
-----------------------------------------------------------------------------
KL_DLAYS=0; //現在ドラッグ中のレイヤーオブジェクトを格納
function kl_drag_set(id){
var e=kl_getelem(id); if(!e) return 0;
//レイヤーにmousedownハンドラを設定
kl_addhandler(e,"onmousedown",kl_drag_mdown,new Array(e));
//Netscape4ではレイヤー内画像にも明示的にハンドラを指定します
if(KL_NS4 && e.document)
kl_addhandler_ns4objs(e.document.images,"onmousedown",kl_drag_mdown,new Array(e));
//ページ全体にmousemove,mouseupハンドラを設定
if(!kl_isarray(KL_DLAYS)){
kl_addhandler(document,"onmousemove",kl_drag_mmove);
kl_addhandler(document,"onmouseup", kl_drag_mup);
KL_DLAYS=new Array();
}
return 1;
}
function kl_drag_clear(id){
var e=kl_getelem(id); if(!e) return 0;
//ハンドラ関数の登録を解除
if(KL_NS4 && e.document)
kl_delhandler_ns4objs(e.document.images,"onmousedown",kl_drag_mdown,new Array(e));
return kl_delhandler(e,"onmousedown",kl_drag_mdown,new Array(e));
}
//レイヤーに登録されるハンドラ関数です
function kl_drag_mdown(ev,e){ 。。。略。。。}
function kl_drag_mdown_raw(ev,e){ 。。。略。。。}
function kl_drag_mmove(ev){ 。。。略。。。}
function kl_drag_mup(){ 。。。略。。。}
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
<a href="javascript:void(0);" onclick="kl_drag_set('lay1'); return false;">ドラッグOK</a>
<div style="position:absolute; border:1px outset; background:#0000FF; padding:20px; z-index:5; color:white;" id="lay1">
レイヤー「lay1」です。
</div>
【レイヤーのドラッグ設定・解除＜keynavi_tools.js】
-----------------------------------------------------------------------------
■ kl_drag_set(id)：レイヤーにドラッグハンドラを設定
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
■ kl_drag_clear(id)：レイヤーのドラッグハンドラを解除
・返り値：成功時は「１」失敗時は「０」
・ id：対象となるレイヤー(オブジェクトかそのID)
-----------------------------------------------------------------------------
KL_DLAYS=0; //現在ドラッグ中のレイヤーオブジェクトを格納
function kl_drag_set(id){
var e=kl_getelem(id); if(!e) return 0;
//レイヤーにmousedownハンドラを設定
kl_addhandler(e,"onmousedown",kl_drag_mdown,new Array(e));
//Netscape4ではレイヤー内画像にも明示的にハンドラを指定します
if(KL_NS4 && e.document)
kl_addhandler_ns4objs(e.document.images,"onmousedown",kl_drag_mdown,new Array(e));
//ページ全体にmousemove,mouseupハンドラを設定
if(!kl_isarray(KL_DLAYS)){
kl_addhandler(document,"onmousemove",kl_drag_mmove);
kl_addhandler(document,"onmouseup", kl_drag_mup);
KL_DLAYS=new Array();
}
return 1;
}
function kl_drag_clear(id){
var e=kl_getelem(id); if(!e) return 0;
//ハンドラ関数の登録を解除
if(KL_NS4 && e.document)
kl_delhandler_ns4objs(e.document.images,"onmousedown",kl_drag_mdown,new Array(e));
return kl_delhandler(e,"onmousedown",kl_drag_mdown,new Array(e));
}
//レイヤーに登録されるハンドラ関数です
function kl_drag_mdown(ev,e){ 。。。略。。。}
function kl_drag_mdown_raw(ev,e){ 。。。略。。。}
function kl_drag_mmove(ev){ 。。。略。。。}
function kl_drag_mup(){ 。。。略。。。}
Netscape4対策１：レイヤー内画像にもハンドラ指定
Netscape4.xでは レイヤー内の画像にも個別にハンドラ関数を登録します。 HTML内に直接かかれているレイヤーについては 画像にname属性を付加すると ドラッグできます(不思議ですね)。 しかし動的に作成したレイヤーではダメです。何れのケースでも確実に ドラッグできるよう 「kl_drag_set()」では レイヤーだけでなく 画像にもハンドラ関数を登録しています。
Netscape4.xでは レイヤー内の画像にも個別にハンドラ関数を登録します。 HTML内に直接かかれているレイヤーについては 画像にname属性を付加すると ドラッグできます(不思議ですね)。 しかし動的に作成したレイヤーではダメです。何れのケースでも確実に ドラッグできるよう 「kl_drag_set()」では レイヤーだけでなく 画像にもハンドラ関数を登録しています。
Netscape4対策２：ハンドラはJavaScriptから指定
イベントハンドラの指定はHTMLのタグ内にも書けるのが普通ですが
あいにくNS4ではそうとは限りません。
<div>に記述したものは無視されます。<layer>タグでは
onmouseover、onmouseoutくらいしか指定できません。
そのため このページの例のように全てJavaScriptからハンドラを設定します。
【レイヤードラッグサンプル：Copy&Paste】
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
<a href="javascript:void(0);" onclick="kl_drag_set('lay1'); return false;">ドラッグOK</a>
<div style="position:absolute; border:1px outset; background:#0000FF; padding:20px; z-index:5; color:white;" id="lay1">
レイヤー「lay1」です。
</div>
上の関数を使ってみましょう。 下の実行ボタンをクリックした後 レイヤーをドラッグしてみて下さい。
解除することもできます。
レイヤー「lay1」です。
次に複数のレイヤーを一緒に移動するケースを考えます。
「e.kl_dlays=配列」に移動したいレイヤーかそのIDを配列として格納しておくと
一緒に移動してくれます。
上を実行後「lay1」をドラッグしてみて下さい。
一緒にドラッグされます。
レイヤー「lay2」です。
動的に作成したレイヤーでは ドラッグオプションがあり これを有効化すると 作成当初からドラッグ可能にできます。
半透明レイヤーでも同様です。 これは前景・背景 ２つのレイヤーから成りますが 何れをクリックした場合でも両方一緒にドラッグされます。
|
【JavaScript@Keynavi.Net ：
レイヤー編：応用
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤーのドラッグ設定・解除
|
・サイトマップ [Shift-S] |