どうも！LSSです！！
JavaScriptに「マウスドラッグイベント」というものがあります。
Webページ内の要素に対して、マウスドラッグを行おうとした時に発生するイベントで、これを仕込んでおくと
- ドラッグが開始された時
- ドラッグが終了した時
- ドラッグ中
などに、指定の関数を動作させる事ができます。
例えば「ドラッグが終了した時」に「要素の位置指定を、ドラッグ終了した地点に変更」するコードを書いた関数を用意しておけば、
「Webページ内で自由にユーザー（読者）が配置変更できるモノ」
を作る事ができますね^^
今回はそれに挑戦してみました！
マウスドラッグで移動する「もぐら」
↓このもぐら、マウスドラッグで移動できます！
コード
<div id="g1" style="position: relative;" draggable="true">
ドラッグで移動させたいものをここに書きます
</div>
<script>// <![CDATA[
g1.addEventListener('dragend',dgend,false);
function dgend(e){
g1.style.position='absolute';
g1.style.top=(e.pageY-50).toString()+'px';
g1.style.left=(e.pageX-50).toString()+'px';
}
// ]]></script>
コード解説
コード一行目、
<div id="g1" style="position: relative;" draggable="true">
で、まず重要なのが、
draggable="true"
の部分です。
このHTMLオプションをつけておく事で、その要素に「ドラッグを許可した」事になります。
あくまで、「ドラッグを許可した」だけで、例えば
<div draggable="true">この一文はドラッグ可能です！</div>
ってコードを書いたとしても…
となり、マウスドラッグしようとすると動くような素振りは見せるものの、配置が変更できるわけではないんですね。
次に、<script>タグ内で、
g1.addEventListener('dragend',dgend,false);
という一行があります。
「g1というidを持つ要素の、dragendイベントを監視して、dragendが発生した時にはdgendという関数を実行する」
という指定になります。
（g1やdgendは任意の名前で、好きに名付けてOKな部分です^^）
そしてその「dgend」という関数が、
function dgend(e){
g1.style.position='absolute';
g1.style.top=(e.pageY-50).toString()+'px';
g1.style.left=(e.pageX-50).toString()+'px';
}
この部分になります。
最初の、
g1.style.position='absolute';
は、CSSの「position:absolute;」を指定したのと同じもので、今回最初の状態では
<div id="g1" style="position: relative;" draggable="true">
relativeを指定していたのを変更しています。
（最初からabsolute指定していれば不要なコードですが、もぐらの初期位置を決めるのにやむを得ずこうしています^^;。もっとうまいやり方がありそうな気が…）
あとの２行、
g1.style.top=(e.pageY-50).toString()+'px';
g1.style.left=(e.pageX-50).toString()+'px';
が、ドラッグ後のもぐらの位置を変更しているコードになります。
e.pageY と e.pageX が「イベントが発生した位置の座標」の値となります。
「イベントが発生した位置の座標」
＝この場合「ドラッグ中にマウスボタンを離した時のマウスカーソルの位置の座標」って事になります。
縦横ともに-50しているのは「マウスカーソルの位置から左50ピクセル、上50ピクセルの位置を要素の左上の書き出し座標」としたかったためです。
今回のもぐらが100×100なので、ちょうどマウスが真ん中位置になるような調整ですが、ここは中身のサイズによって調整が必要なところですね。
あと、JavaScriptからCSSの指定を代行して指定する時に「文字列として」与える必要があるため、「.toString()」で文字列化し、末尾に「px」を付け足しています。
例えばマウス縦位置が200だったとしたら、200-50の150となり、'150px'という値がg1.style.topに指定される事になります。
CSSで
#g1{
top:150px;
}
と指定したのと同じ状態になるんですね。
あとがき
だいぶ前にも一度、これをやろうとした事があったんですが、その時は何故かうまくいきませんでした^^;
draggable="true" あたりをちゃんと理解してなかったのかな？
今回のネタは、普通のブログ記事ではあまり使い途がなさそうですが、ブラウザゲームなんかを作る時には 面白い操作性が実現できそうですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
