JavaScriptを使用した画像のドラッグ

  • マウスイベントとキーイベントを利用してIMGエレメント(IMGタグ)をドラッグするサンプルです。
  • onmouseoverとonmouseoutでドラッグ対象となるエレメントを選別します。
  • onmousedownでドラッグを開始します。
  • onmouseupでドラッグを終了します。
  • onkeydownとonkeyupのテストも兼ねて、(1)ボタンでもドラッグできます。
  • デフォルトのドラッグ処理が行われないように、ondragstart,onselectstartは無効化します。
  • Wiiではテキストを選択する処理が無効化できていません。
  • エレメント同士の当たり判定は実装していません。
  • エレメントの画面外移動防止処理は実装していません。
  • 2011/05/04 Firefoxでの動作を修正しました。


戻る