ブラウザでリダイレクト時の&(アンパサンド)の扱い
Posted on | 4月 29, 2010 | No Comments
ちょっとブラウザでのリダイレクトの挙動にハマりましたので、メモがてら書いておきます。
検証ブラウザ：
Firefox 3.5(WinXP)
Firefox 3.6(WinVista)
Internet Explorer 7.0(WinXP)
Internet Explorer 8.0(Win7)
WinSafari 4.0(WinXP)
Opera 10.5(WinXP)
Google Chorme 4.1(WinXP)
まずリダイレクトする方法について確認します。
・JavaScriptで行う方法
JavaScriptでリダイレクトするには、以下の記述を行います。
location.href = '<リダイレクト先URL>'
例としては、以下のように書くとリダイレクトが行われます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript Redirect Sample</title>
<script type="text/JavaScript">
<!--
function Redirect() {
location.href = 'http://maps.google.co.jp/';
}
-->
</script>
</head>
<body onload='Redirect();'>
</body>
</html>
動作サンプルはこちら(Google Mapにリダイレクトされます)↓
http://program-place.project-wired.net/redirect/javascript_redirect.html
※当たり前ですが、JavaScriptをオフにしていると動きません
・metaタグで行う方法
もうひとつはmetaタグで行う方法です。
以下の記述を行うことで、リダイレクトすることができます。
<meta http-equiv="Refresh" content="0;URL=リダイレクト先URL">
具体的には以下のように書いたりします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Refresh" content="0;URL=http://maps.google.co.jp/">
<title>Meta Tag Redirect Sample</title>
</head>
<body>
</body>
</html>
動作サンプルはこちら(Google Mapにリダイレクトされます)↓
http://program-place.project-wired.net/redirect/meta_redirect.html
とりあえず上記の例で、すべての検証ブラウザでリダイレクトが行われることは確認しています。
それでここから本題になりますが、リダイレクト時にパラメータがあるURLを指定時、&(アンパサンド)の記述方法によって各ブラウザで挙動が違います。
具体的には「&」と「&」と書く場合の違いですね。ということで検証します。
検証前にまずパラメータありのURLが必要なため、GoogleMapさんを利用します。
・ちなみに一番最初のパラメータのみだとアメリカ上空以外になります↓
http://maps.google.co.jp/?ie=UTF8
では準備も整ったので検証していきます。
GoogleMapのアメリカ上空にリダイレクトした場合は、こちらで期待した動作になります(仕様とかは別にして)。
・JavaScriptで「&」を使用した場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript Redirect Sample</title>
<script type="text/JavaScript">
<!--
function Redirect() {
location.href = 'http://maps.google.co.jp/?ie=UTF8&hq=&hnear=%E3%82%B5%E3%83%B3%E3%83%95%E3%83%A9%E3%83%B3%E3%82%B7%E3%82%B9%E3%82%B3,+%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,+%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E5%90%88%E8%A1%86%E5%9B%BD&ll=34.813803,-99.492187&spn=52.475256,82.880859&z=4&brcurrent=3,0x0:0x0,1';
}
-->
</script>
</head>
<body onload='Redirect();'>
</body>
</html>
実際に動作するページはこちら↓
http://program-place.project-wired.net/redirect/javascript_redirect_ampersand1.html
ブラウザ検証結果：
検証対象ブラウザすべてで、期待通りにページに遷移しました(アメリカ上空)。
・JavaScriptで「&」を使用した場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript Redirect Sample</title>
<script type="text/JavaScript">
<!--
function Redirect() {
location.href = 'http://maps.google.co.jp/?ie=UTF8&hq=&hnear=%E3%82%B5%E3%83%B3%E3%83%95%E3%83%A9%E3%83%B3%E3%82%B7%E3%82%B9%E3%82%B3,+%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,+%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E5%90%88%E8%A1%86%E5%9B%BD&ll=34.813803,-99.492187&spn=52.475256,82.880859&z=4&brcurrent=3,0x0:0x0,1';
}
-->
</script>
</head>
<body onload='Redirect();'>
</body>
</html>
実際に動作するページはこちら↓
http://program-place.project-wired.net/redirect/javascript_redirect_ampersand2.html
ブラウザ検証結果：
Internet Explorer7.0、8.0のみ期待通りの動作(アメリカ上空に遷移)しましたが、他ブラウザはすべてアメリカ上空以外にリダイレクトされました。
・metaタグで「&」を使用した場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Refresh" content="0;URL=http://maps.google.co.jp/?ie=UTF8&hq=&hnear=%E3%82%B5%E3%83%B3%E3%83%95%E3%83%A9%E3%83%B3%E3%82%B7%E3%82%B9%E3%82%B3,+%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,+%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E5%90%88%E8%A1%86%E5%9B%BD&ll=34.813803,-99.492187&spn=52.475256,82.880859&z=4&brcurrent=3,0x0:0x0,1">
<title>Meta Tag Redirect Sample</title>
</head>
<body>
</body>
</html>
実際に動作するページはこちら↓
http://program-place.project-wired.net/redirect/meta_redirect_ampersand1.html
ブラウザ検証結果：
検証対象ブラウザすべてで、期待通りにページに遷移しました(アメリカ上空)。
・metaタグで「&」を使用場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Refresh" content="0;URL=http://maps.google.co.jp/?ie=UTF8&hq=&hnear=%E3%82%B5%E3%83%B3%E3%83%95%E3%83%A9%E3%83%B3%E3%82%B7%E3%82%B9%E3%82%B3,+%E3%82%AB%E3%83%AA%E3%83%95%E3%82%A9%E3%83%AB%E3%83%8B%E3%82%A2,+%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E5%90%88%E8%A1%86%E5%9B%BD&ll=34.813803,-99.492187&spn=52.475256,82.880859&z=4&brcurrent=3,0x0:0x0,1">
<title>Meta Tag Redirect Sample</title>
</head>
<body>
</body>
</html>
実際に動作するページはこちら↓
http://program-place.project-wired.net/redirect/meta_redirect_ampersand2.html
ブラウザ検証結果：
検証対象ブラウザすべてで、期待通りにページに遷移しました(アメリカ上空)。
ということで、JavaScriptでlocaiton.hrefを使う場合、「&」を使用すると期待通りの遷移をしないので気をつけましょう。
ちなみにIEだけは期待通りの動作しましたが、他ブラウザがすべて期待通りの動作をしないことから、IEが仕様どおりじゃない可能性が非常に高いです。
(まあIEですしね)
たぶん、http://www.w3.org/TR/html4/loose.dtdらへんを読めば仕様わかるかもしれないんですが、パッとみてもわからなかったので、ギブです。誰か教えてください。
ではでは。
新年ゲーム福袋を買ってきました
Posted on | 1月 2, 2010 | No Comments
新年１発目になります。
今年もよろしくお願いいたしますm(_ _)m
さて、新年ということで買ってきました福袋！
普通にゲームショップでPS2ソフト10本入り2010円というやつを買ったあとにですね。
すごいのをみつけてしまいましてですね。
思わず買ってしまったんですよ。
これを！↓
PSソフトパック福袋(2010円)
レジに持ってく時点でめっちゃ重かったです(笑
で、中をみたらこんな感じでした↓(笑)
PSソフトパック福袋(2010円)の中身
うーん、50本くらい入ってましたね！
いつやるんだこの量のゲームっていう心の声はもちろん黙殺ですよ！
まあ、それで家に帰りまして、中を調べてみたら結果はこうでした↓
- Beyond The Beyond
- テニスの王子様
- シャーマンキング スピリットオブシャーマンズ
- NBA Live 96
- ワールドサッカー 実況ウイニングイレブン3 ～World Cup France’98～
- にとうしんでん
- DRAGON BALL Z ULTIMATE BATTLE 22
- ONE PIECE とびだせ海賊団！
- アクアノートの休日
- DX人生ゲーム
- トゥルーラブストーリー
- RPGツクール4
- アルナムの牙
- ギャロップレーサー2
- ギャロップレーサー3
- アーマードコア プロジェクトファンタズマ
- 機動戦士ガンダム 逆襲のシャア
- ポポロクロイス物語
- グランツーリスモ
- グランツーリスモ2
- スターオーシャン セカンドストーリー
- 筋肉番付VOL.3 ～最強のチャレンジャー誕生！～
- テイルズ オブ ファンタジア
- テイルズ オブ ディスティニー
- ザ・コンビニ2 ～全国チェーン展開だ！～
- みんなのGOLF
- 鉄拳2
- 鉄拳3
- ゼロ・パイロット／銀翼の戦士
- 星で発見!! たまごっち
- 信長の野望・覇王伝
- TOBAL NO.1
- XI[sai]
- FINAL FANTASY TACTICS
- サイキックフォース
- はじめの一歩
- Dの食卓 コンプリートグラフィックス
- CHASE THE EXPRESS
- ツァイトガイスト
- キャプテン翼 新たなる伝説・序章
- ウンジャマ・ラミー
- BOXER’S ROAD
- 音楽ツクールかなでーる2
- ドラゴンクエストⅦ エデンの戦士たち
- ZERO DIVIDE
- スクリーン
- 第4次スーパーロボット大戦S
- I.Q FINAL
- A列車で行こう4
- ARMORED CORE MASTER OF ARENA
ちょうど50本でした～そりゃ重いですよね！(笑
ちなみに私、根っからのセガサターンユーザだった為に、ほとんどダブリがないんですね(IQ FINALとXIがダブったくらいです)。
逆に言えば、面白いゲームがさっぱり分からんということでもあります。
まあ適当にやるのもいいんですが、出来ればこれが面白いよっていうソフトで絞りたいところなんですよね…。誰か教えてくれないかなあ…
JavaScriptでDrag & Drop(主要ブラウザ対応版)
Posted on | 12月 19, 2009 | No Comments
前の記事はこちら↓
JavaScriptでDrag & Drop(たぶん標準準拠版)
前回、前々回の記事で、標準準拠版、IE版のDrag & Dropのサンプルを載せました。
今回は集大成として（大げさですね）、どちらにも対応するDrag & Dropサンプルを載せたいと思います。
以下、ソースです↓
JavaScript(draganddrop.js)↓
// Drog & Drop Sample Standard & IE Version
addEvent(window, 'load', init, false);
function init() {
var sample = document.getElementById('sample');
addEvent(sample, 'mouseover', mouseover, false);
addEvent(sample, 'mouseout', mouseout, false);
}
function mouseover(evt) {
var evt = getEvent(evt);
var target = getTarget(evt);
addEvent(target, 'mousedown', mousedown, false);
}
function mouseout(evt) {
var evt = getEvent(evt);
var target = getTarget(evt);
removeEvent(target, 'mousedown', mousedown, false);
}
function mousedown(evt) {
var evt = getEvent(evt);
var target = getTarget(evt);
this.ex = evt.clientX - parseInt(target.style.left);
this.ey = evt.clientY - parseInt(target.style.top);
addEvent(target, 'mousemove', mousemove, false)
addEvent(target, 'mouseup', mouseup, false)
}
function mousemove(evt) {
var evt = getEvent(evt);
var target = getTarget(evt);
var dx = evt.clientX - this.ex;
var dy = evt.clientY - this.ey;
if(dx < 0) {
dx = 1;
}
if(dy < 0) {
dy = 1;
}
target.style.left = dx + 'px';
target.style.top = dy + 'px';
}
function mouseup(evt) {
var evt = evt || window.event;
var target = getTarget(evt);
removeEvent(target, 'mousemove', mousemove, false);
removeEvent(target, 'mouseup', mouseup, false);
}
// ---------------------------------------
// Standard & IE イベントハンドラ共通処理
// ---------------------------------------
function addEvent(obj, evtType, func, cap) {
if (obj.addEventListener) {
obj.addEventListener(evtType, func, cap);
}
else if (obj.attachEvent) {
obj.attachEvent('on' + evtType, func);
}
}
function removeEvent(obj, evtType, func, cap) {
if (obj.removeEventListener) {
obj.removeEventListener(evtType, func, cap);
}
else if (obj.detachEvent) {
obj.detachEvent('on' + evtType, func);
}
}
function getEvent(evt) {
if (evt) {
return evt;
}
else if (window.event) {
return window.event;
}
}
function getTarget(evt) {
if (evt.target) {
return evt.target;
}
else if (evt.srcElement) {
return evt.srcElement;
}
}
HTML(draganddrop.html)↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Drag & Drop Sample</title>
<link rel="stylesheet" type="text/css" href="draganddrop.css" media="all" charset="utf-8">
<script type="text/javascript" src="draganddrop.js"></script>
</head>
<body>
<div id="sample" style="top:0px; left:0px;">Sample</div>
</body>
</html>
CSS(draganddrop.css)↓
/* Drog & Drop Sample css */
#sample {
position: absolute;
z-index: 900;
background-color: orange;
border: 1px solid black;
overflow: hidden;
width: 100px;
height: 40px;
}
実際に動作しているページはこちらです↓
http://program-place.project-wired.net/draganddrop/draganddrop.html
※注 大抵のブラウザで動きます。
動作確認済みブラウザ
・Firefox 3.5
・Google Chrome 3.0
・Opera 10.0
・Windows Safari 4.0
・Internet Explorer 6.0
・Internet Explorer 7.0
一応、ソースも置いときます(JS内は色々コメントを追加しています)↓
draganddrop.zip
今回の対応で、JavaScriptにイベントハンドラ共通関数を作成しています。
関数の動作例としては、addEventListener関数が存在すればaddEventListenerを使用し、なければattachEventを使用するといったものです。
まあ地味にその共通関数のせいでソース行数が増えます…。IEに対応するためだけに約2倍…。
内容の解説は、前の記事(上の方にリンクあります)を参照してください（っていっても、あんまりちゃんと書いてませんが）。
しかし、とりあえず書いてはみたものの、ちゃんとドラッグアンドドロップを使う場合はフレームワーク(YUIとか)を使ったほうがいいと思います。クロスブラウザ対応はめんどくさいですからね。
まあでもフレームワークはJavaScriptを直で書くより遅いというし、バランスが大事かもです。
さて、Drag & Dropのサンプル作成の理由は「作ったことなかったから」だったんですけど、なかなかに勉強になりました。好奇心って大事ですね。
ではでは。
JavaScriptでDrag & Drop(IE版)
Posted on | 11月 26, 2009 | 3 Comments
前回記事↓
JavaScriptでDrag & Drop(たぶん標準準拠版)
のつづきです。
IEのシェアが10%くらいになってくれればIE版なんて作る必要はないのですが、悲しいことにそうもいかないのでIEで動作するサンプルを作成しました。
一応、IE6, IE7, IE8で動作確認をしています。
とりあえずIE版Drag & Dropの全ソースです↓
JavaScript(draganddropie.js)↓
// Drog & Drop Sample Internet Explorer Version
window.attachEvent('onload',init);
function init() {
var sample = document.getElementById('sample');
sample.attachEvent('onmouseover', mouseover);
sample.attachEvent('onmouseout', mouseout);
}
function mouseover() {
window.event.srcElement.attachEvent('onmousedown', mousedown);
}
function mouseout() {
window.event.srcElement.detachEvent('onmousedown', mousedown);
}
function mousedown() {
var evt = window.event;
this.ex = evt.clientX - parseInt(evt.srcElement.style.left);
this.ey = evt.clientY - parseInt(evt.srcElement.style.top);
evt.srcElement.attachEvent('onmousemove', mousemove);
evt.srcElement.attachEvent('onmouseup', mouseup);
}
function mousemove() {
var evt = window.event;
var dx = evt.clientX - this.ex;
var dy = evt.clientY - this.ey;
if (dx < 0) dx = 1;
if (dy < 0) dy = 1;
evt.srcElement.style.left = dx + 'px';
evt.srcElement.style.top = dy + 'px';
}
function mouseup() {
var evt = window.event;
evt.srcElement.detachEvent('onmousemove', mousemove);
evt.srcElement.detachEvent('onmouseup', mouseup);
}
HTML(draganddropie.html)↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Drag & Drop Sample</title>
<link rel="stylesheet" type="text/css" href="draganddropie.css" media="all" charset="utf-8">
<script type="text/javascript" src="draganddropie.js"></script>
</head>
<body>
<div id="sample" style="top:0px; left:0px;">Sample</div>
</body>
</html>
CSS(draganddropie.css)↓
/* Drog & Drop Sample css */
#sample {
position: absolute;
z-index: 900;
background-color: orange;
border: 1px solid black;
overflow: hidden;
width: 100px;
height: 40px;
}
実際に動作しているページはこちらです↓
http://program-place.project-wired.net/draganddropie/draganddropie.html
※注 前回のときとは違い、今回はIEでしか動きません
一応、ソースも置いておきます↓
draganddropie.zip
ちなみにJavaScriptの処理の流れは前回と同様ですが、IEでは使用できる関数が違います。
標準準拠版とIE版の違いは以下の点です。
・イベントリスナ登録関数の違い
addEventListener(標準) → attachEvent(IE)
・イベントリスナ解除関数の違い
removeEventListener(標準) → detachEvent(IE)
・発生イベント取得方法の違い
addEventListnerで登録した関数実行時、第一引数に発生イベントが渡される(標準) → window.event(IE)
・発生イベントのタグ取得方法の違い
event.target(標準) → window.event.srcElement(IE)
はい、非常にめんどくさいですね…。そもそもIEのせいで覚える手間が約２倍になるというのが何とも…。ホントIEのシェアが0%になればいいのに！(本音)
さて、標準準拠版、IE版ときましたので次回は両方に対応しているサンプルを載せることにします。
JavaScriptでDrag & Drop(たぶん標準準拠版)
Posted on | 11月 22, 2009 | 2 Comments
Drag & Dropのサンプル書いたので、忘れないうちにメモ。
動作確認を行ったブラウザは、Firefox 3.5, Chrome 3.0, Opera 10.0, Safari 4.0になります(全部Windows)。
ちなみにIEでは動きません(一応、標準準拠版ですから)。IE版についてはまた別記事で書く予定です。
とりあえずサンプルの全ソースです。
JavaScript(draganddropstandard.js)↓
// Drog & Drop Sample Standard Version
window.addEventListener('load', init, false);
function init() {
var sample = document.getElementById('sample');
sample.addEventListener('mouseover', mouseover, false);
sample.addEventListener('mouseout', mouseout, false);
}
function mouseover(evt) {
evt.target.addEventListener('mousedown', mousedown, false);
}
function mouseout(evt) {
evt.target.removeEventListener('mousedown', mousedown, false);
}
function mousedown(evt) {
this.ex = evt.clientX - parseInt(evt.target.style.left);
this.ey = evt.clientY - parseInt(evt.target.style.top);
evt.target.addEventListener('mousemove', mousemove, false);
evt.target.addEventListener('mouseup', mouseup, false);
}
function mousemove(evt) {
var dx = evt.clientX - this.ex;
var dy = evt.clientY - this.ey;
if(dx < 0) {
dx = 1;
}
if(dy < 0) {
dy = 1;
}
evt.target.style.left = dx + 'px';
evt.target.style.top = dy + 'px';
}
function mouseup(evt) {
evt.target.removeEventListener('mousemove', mousemove, false);
evt.target.removeEventListener('mouseup', mouseup, false);
}
HTML(draganddropstandard.html)↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Drag & Drop Sample</title>
<link rel="stylesheet" type="text/css" href="draganddropstandard.css" media="all" charset="utf-8">
<script type="text/javascript" src="draganddropstandard.js"></script>
</head>
<body>
<div id="sample" style="top:0px; left:0px;">Sample</div>
</body>
</html>
CSS(draganddropstandard.css)↓
/* Drog & Drop Sample css */
#sample {
position: absolute;
z-index: 900;
background-color: orange;
border: 1px solid black;
overflow: hidden;
width: 100px;
height: 40px;
}
実際に動作しているページはこちらです↓
http://program-place.project-wired.net/draganddropstandard/draganddropstandard.html
※注 はじめのほうで言っていますが、IEでは動きません。Firefox,Chrome,Safari,Operaあたりでどうぞ
一応、ソースも置いておきます↓
draganddropstandard.zip
JavaScriptでDrag & Dropの流れは以下のようになります。
load時に、init関数を実行。
↓
init関数内で、id=”sample”のdivに対してmouseover,mouseout時のイベントリスナを登録。
※mouseover：マウスポインタがdivに触れたときに発生するイベント。上記イベントリスナ登録により、mouseover関数が実行される。
※mouseout：マウスポインタがdivから外れたときに発生するイベント。上記イベントリスナ登録により、mouseout関数が実行される。
↓
マウスオーバー(mouseover)時、mousedown時のイベントリスナを登録
※mousedown：マウスを左クリックしたときに発生するイベント。上記イベントリスナ登録により、mousedown関数が実行される。
↓
左クリック(mousedown)時、mousedown関数が実行され、「マウスと左上の点との差分のX座標」と「マウスと左上の点との差分のY座標」を取得。
その後、mousemove,mouseup時のイベントリスナを登録。
※mousemove：マウスが動かされたときに発生するイベント。上記イベントリスナ登録により、mousemove関数が実行される。
※mouseup：押していたマウスボタンを離したときに発生するイベント。上記イベントリスナ登録により、mouseup関数が実行される。
↓
マウスを動かした(mousemove)時、mousemove関数が実行され、「イベント発生時のX座標 – mousedown時に取得したX座標」と「イベント発生時のY座標 – mousedown時に取得したY座標」にdivを移動する。
↓
押したままにしていた左クリックを離した(mouseup)時、mouseup関数が実行され、mousemove,mouseup時のイベントリスナが解除される。
↓
id=”sample”のdivタグから、マウスを離した(mouseout)時、mouseout関数が実行され、mousedown時のイベントリスナが解除される。
ちなみにCSSが外部ファイル化されているのに、以下のdivタグではインラインスタイルが使われています↓
<div id="sample" style="top:0px; left:0px;">Sample</div>
これはなぜかというと、上記JavaScriptサンプルでインラインスタイル要素の取得を使用しているためです(style.leftとstyle.top)。
まあインライン以外のCSSをうまく読み取る方法が思いつかなかっただけなんですが。そう、これが私の限界(いまのところ)。
上記サンプルは参考程度に使っていただくのが良いと思います。使う人がいるのか分かりませんが…。
さて、次回は(仕方なく作った)IE版についてのサンプルを載せようと思います。
→2009/11/26 追記 IE版書きました↓
JavaScriptでDrag & Drop(IE版)
ちなみにどうでもいい話↓
今回タイトルつけるにあたり、ドラッグアンドドロップとDrag & Dropのどっちが多いかググったら、
ドラッグアンドドロップ：約 218,000 件
Drag & Drop：約 111,000 件
となってました。なので少ないほうにしました。いつだって少数派が好きです。
がんばれDrag & Drop！
カレンダー
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
| « 4月 | ||||||
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | |||||
最近の記事
タグクラウド
カテゴリ一覧
月別アーカイブ
あわせて読みたい
