トップ 言語 JavaScript 基礎編 その他のサンプルプログラム ドラッグ&ドロップして自由配置

JavaScriptでドラッグ&ドロップして自由配置―マウスで要素の位置を変更するサンプルなど

マウスで要素の位置を変更するサンプルなど。JavaScriptでドラッグ&ドロップして自由配置するプログラムの作り方をまとめています。

JavaScriptでドラッグ&ドロップで自由配置

マウス関連のイベントを使用することで、ドラッグ&ドロップで選択された要素の位置を変化させることができます。 これができれば、Webブラウザ上にWindowsのアプリケーションと同じ用なWebアプリケーションが作れそうですね。

以下では、マウス関連のイベントを軽く見ていき、実際にマウスのドラッグ&ドロップで図形の位置を自由に変更できるプログラムのサンプルを見ていきます。

マウスで要素の位置を変更するために使うマウス関連のイベント

onmousedown、onmouseup、onmousemoveの3つのイベントを使ってドラッグ&ドロップのプログラムを実現使用と思います。

ドラッグ&ドロップで図形の位置を自由に変更できるプログラム

では、ドラッグ&ドロップで図形の位置を自由に変更できるプログラムを見ていきます。

サンプルソース

青、赤、緑の50px四方の正方形を立てに並べて、ドラッグ&ドロップで位置を変更するプログラムです。

<html>
<head>
<style type="text/css">
  div {
    width: 50px; 
    height: 50px; 
    position: absolute; 
  }
  div.a {
    background-color: blue;
    top: 0px; 
    left: 0px; 
  }
  div.b {
    background-color: red;
    top: 50px; 
    left: 0px; 
  }
  div.c {
    background-color: green;
    top: 100px; 
    left: 0px; 
  }
</style>
<script type="text/javascript">
  function draggable(target) {
    target.onmousedown = function() {
      document.onmousemove = mouseMove;
    };
    document.onmouseup = function() {
      document.onmousemove = null;
    };
    function mouseMove(e) {
      var event = e ? e : window.event;
      target.style.top = event.clientY + 'px';
      target.style.left = event.clientX + 'px';
    }
  }
</script>
</head>
<body>
<div class="a" id="a1"></div>
<div class="b" id="b1"></div>
<div class="c" id="c1"></div>
<script type="text/javascript">
  draggable(document.getElementById('a1'));
  draggable(document.getElementById('b1'));
  draggable(document.getElementById('c1'));
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

ページ表示直後は縦に各正方形のオブジェクトが並びます。

ドラッグ&ドロップで図形の位置を自由に変更できるプログラム―ページ表示直後

たとえば、赤色のオブジェクトをドラッグ&ドロップで移動すると赤色のオブジェクトの要素がその位置まで移動します。

ドラッグ&ドロップで図形の位置を自由に変更できるプログラム―赤色のオブジェクトを移動

緑色ののオブジェクトもドラッグ&ドロップで移動するとその位置まで移動します。

ドラッグ&ドロップで図形の位置を自由に変更できるプログラム―緑色のオブジェクトを移動

青色もドラッグ&ドロップで移動します。重なったときははじめに作成したオブジェクトが下に表示されます。

ドラッグ&ドロップで図形の位置を自由に変更できるプログラム―青色のオブジェクトを移動

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴 /翻訳英語の学習 /RSEUserGuide翻訳

スポンサーリンク