HTML5ではない古典的なやり方ですが、画面を演出するにはHTML5よりも優れています。
応用次第でできる幅が広がるので是非覚えていていただきたい手法です。
DEMO
解説
<script type="text/javascript">
var obj ;
window.onload=function(){
//IMG要素全てのクリックをイベント登録する。
if (document.getElementsByTagName) {
objlist = document.getElementsByTagName('img');
} else {
return;
}
for (i = 0; i < objlist.length; i++) {
objlist[i].onmousedown = onMouseDown;
}
//その他、マウス移動、マウスのクリック解除イベントを登録
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
}
/**
* クリックされたときのイベントファンクション
*/
function onMouseDown(e) {
obj = this;
//マウスの位置と画像の位置の差を記録する。
//※マウスの位置を取得するオブジェクトが異なるの腹立つ
if (!e) { /* I.E. */
obj.offsetX = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - parseInt(obj.style.left);
obj.offsetY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - parseInt(obj.style.top);
} else { /* firefox */
obj.offsetX = e.pageX - parseInt(obj.style.left);
obj.offsetY = e.pageY - parseInt(obj.style.top);
}
// return falseしておかないとクリックが離れても継続(for fireFox)
return false;
}
function onMouseMove(e) {
/** クリックされていない場合は無視 */
if (!obj) {
return true;
}
if (!e) {
obj.style.left = event.clientX - obj.offsetX;
obj.style.top = event.clientY - obj.offsetY;
} else {
obj.style.left = (e.pageX - obj.offsetX) + 'px';
obj.style.top = (e.pageY - obj.offsetY) + 'px';
}
// return falseしておかないとクリックが離れても継続(for I.E.)
return false;
}
/**
* クリックを離したら、動かす画像も解除する。
*/
function onMouseUp(e) {
obj = null;
}
</script>
・windows.onload
『HTMLを完全に読み込んだ後、実行される』関数です。
この関数の中で、要素オブジェクトを抽出し、各要素に対して、『クリックを押されたらonMouseDownを実行する』というイベント登録を行います。今回は、画像を指定していますが、テーブルなど他の要素を指定することも可能です。※大事なのは、その要素に対し、CSSでposition指定することです。これがないと動きません。
style="position:absolute; (SAMPLEを参照ください。)
その他『初期化』として、画面上での『マウス移動』『クリック解除』をイベント登録しておきます。
・onMouseDown
onMouseDownは初期化でイベント登録されました。
thisは、クリックされた対象要素です。これをフィールド変数のobjにセットします。マウス移動時に使用します。
この処理で大事なのは、オフセット（マウスの位置と画像の位置の差）を求めておくことです。
・onMouseMove
onMouseMoveは初期化でイベント登録されました。
クリックされていない場合は、objには何も格納されていないので、この処理を終了させます。
マウス移動するたびに『画像の位置』からオフセットを引いた位置に画像を移動させます。
・onMouseUp
onMouseUpは初期化でイベント登録されました。
クリック解除されたら、フィールド変数objを開放します。そしたらマウス移動時も無視されるようになります。
※確認環境：
I.E.8 ○
Firefox3.6 ○
Safari5.0.5 ○
PR
