WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > javascriptサンプル > <move>「画像やDIVをマウスで移動」

画像やDIVをマウスで移動

写真などの画像やDIVをマウスで好きなところに移動できるJavaScriptです。
利用するためのHTML変更は非常に少なく簡単にすぐ利用できます。改造も自由ですので雛形JavaScriptとしてもご利用ください。

広告

サンプル

画面のどこでも移動可能

青字部分を追加するだけで移動が可能となります。(この枠も移動可能です)
<div class="sb1" cmanOMat="move"><input type="button"value="移動可能"></div>
<img src="cat1.jpg" class="cat1" cmanOMat="move">
<img src="cat2.jpg" class="cat2" cmanOMat="move">

枠からはみ出さない移動

外枠からはみ出さないように移動することも可能です。(この枠も移動可能です)
<div class="areadiv" cmanOMat="area">
   <img src="dog1.jpg" cmanOMat="movearea">
   <img src="cat3.jpg" cmanOMat="movearea">
   <img src="dogcat.jpg" cmanOMat="move">
</div>
【この罫線枠もマウスで移動可能です】
ページTOP

利用方法

[1] JavaScriptファイル指定

JavaScriptファイルは、ダウンロードしてご利用ください。

JavaScriptダウンロード

現在のバージョン:Ver092(zip形式でダウンロードされます)

JavaScriptを画面に表示
以下のJavaScriptへ直接リンクを行うことも可能ですが、予告なしに内容変更や廃止(削除)する場合もありますのでダウンロードしてご利用ください。
直接リンクの場合「http://web-designer.cman.jp/freejs/cmanObjMove_v092.js」

[2] HTMLの変更

外部JyavaScriptの指定

<script src="xxxxx.js" charset="utf-8"></script>

ダウンロードしたJavaScriptを外部ファイルとして定義してください

移動要素の指定

<img src="aaaxxxxx.js" cmanOMat="move">

移動したい要素(注1)に「cmanOMat」属性を追加し、以下の値を設定してください。

自由移動cmanOMat="move"
範囲移動cmanOMat="movearea"

(注1)「img」「div」に対応しています。他のタグを移動したい場合はJavaScriptを変更してください。

移動範囲の指定

範囲移動を使用する場合は、移動できる範囲のタグに以下の属性を追加してください。

<div cmanOMat="area">

上記サンプル「枠からはみ出さない移動」を参考にしてください。

ページTOP

注意事項

  • HTML5、CSS3を使用しています。古いブラウザでは正常に動作しません。
  • JavaScriptを直接使用することもできますが、当社都合で予告なしに廃止することもあります。
    出来るだけダウンロードしてご利用ください。
  • ダウンロードしたJavaScriptは改変自由です。
    再配布なども自由ですが、改変時には著作権表示を残してください。詳細は、ダウンロードしたJavaScriptの先頭をご確認ください。
  • 幅を指定しないと正常に動作しない場合があります。また、移動対象のオブジェクト上に他のオブジェクト(タグ)が存在する場合は、移動しない場合があります。
    改変自由ですので、それぞれの利用に沿って改造してご利用ください。
  • 使用方法などのご質問はお受けしておりません。
    当ページの記載内容や実際の動作にてご確認ください。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン