2015/06/27(土) [n年前の日記]
#1 [javascript] JavaScript勉強中
ローカルの画像ファイルをブラウザにD&D(ドラッグアンドドロップ)して、DOMで表示してマウスドラッグで画像の位置を移動できないか試してたり。JavaScript の勉強というか。
たぶんできた、ような気がする。
_(1) DnDされた画像ファイルをDOMで追加表示してマウスドラッグで移動してみるテスト - jsdo.it
これで見れるのだろうか…。
たぶんコレ、jQueryプラグイン等を使えばもっと簡単にできるんじゃないかと思うけど。JavaScript の初心者なので何をどうしたらいいのかよくわからんというか、検索キーワードすら思いつかないので、素の JavaScript でどうにか。
たぶんできた、ような気がする。
_(1) DnDされた画像ファイルをDOMで追加表示してマウスドラッグで移動してみるテスト - jsdo.it
これで見れるのだろうか…。
たぶんコレ、jQueryプラグイン等を使えばもっと簡単にできるんじゃないかと思うけど。JavaScript の初心者なので何をどうしたらいいのかよくわからんというか、検索キーワードすら思いつかないので、素の JavaScript でどうにか。
◎ ハマった点。 :
Firefox の場合、マウスカーソル座標を event.X、event.Y で取得しようとすると undefined になるようで、event.clientX、event.clientY で取得しないとダメだった。
ファイルをD&Dするたびに、せっかく表示していた div 内の img が全部消えてたけど。D&Dされたときに div の innerHTML を毎回クリアするというミスをして1時間ぐらいハマってました。自分、アホ過ぎる。
マウスボタンを押したり(onmousedown)、上げたり(onmouseup)、マウスカーソルを動かしたり(onmousemove)、そのあたりのイベントを最初はdocument全体に割り当てたら、座標リストを表示してるのに選択できないしコピーもできないしで。キャンバス相当の div にのみ、それらのイベントを割り当てたら、それ以外のエレメントに対してはフツーの操作ができるようになりました。
手元の html に書いて実験してた時は動いてるように見えたけど、jsdo.it にコピペしたらエラーがバンバン出て。ブロックの中で関数を作ってはいかんとか、ループの中で関数を作ってはいかんとか。関数をブロック外に出すのはどうにかできたけど、ループ内で作ってる関数は外に出すことができず。コレ、どう書き直せばいいのやら…。
ファイルをD&Dするたびに、せっかく表示していた div 内の img が全部消えてたけど。D&Dされたときに div の innerHTML を毎回クリアするというミスをして1時間ぐらいハマってました。自分、アホ過ぎる。
マウスボタンを押したり(onmousedown)、上げたり(onmouseup)、マウスカーソルを動かしたり(onmousemove)、そのあたりのイベントを最初はdocument全体に割り当てたら、座標リストを表示してるのに選択できないしコピーもできないしで。キャンバス相当の div にのみ、それらのイベントを割り当てたら、それ以外のエレメントに対してはフツーの操作ができるようになりました。
手元の html に書いて実験してた時は動いてるように見えたけど、jsdo.it にコピペしたらエラーがバンバン出て。ブロックの中で関数を作ってはいかんとか、ループの中で関数を作ってはいかんとか。関数をブロック外に出すのはどうにかできたけど、ループ内で作ってる関数は外に出すことができず。コレ、どう書き直せばいいのやら…。
[ ツッコむ ]
以上です。