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

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

▲記事トップへ

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

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

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

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

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

onmousedownイベント
マウスのボタンが押されたときに発生するイベントです。
onmouseupイベント
マウスのボタンが離されたときに発生するイベントです。
onmousemoveイベント
マウスが移動したときに発生するイベントです。

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

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

サンプルソース

青、赤、緑の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>