JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。

ドラッグ可能なDIV要素のサンプルコード

以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。

<!DOCTYPE html>
<html>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .dragDiv {
        position: absolute;
        z-index: 9;
        text-align: center;
        border: 1px solid #d3d3d3;
        padding: 30px;
        cursor: move;
        z-index: 10;
        background-color: rgb(108, 24, 177);
        color: #fff;
        font-size: 20px;
        font-weight: 500;
    }
</style>
<body>
<h1>Draggable DIV Element Example</h1>
<h2>Click and drag the below element to move it around</h2>
<div class="dragDiv">
This div can be moved around
</div>
<script>
    dragElement(document.querySelector(".dragDiv"));
    function dragElement(ele) {
        var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
        if (document.querySelector(ele.id + "header")) {
            document.getElementById(
                ele.id + "header"
            ).onmousedown = dragMouseDown;
        }
        else {
            ele.onmousedown = dragMouseDown;
        }
        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }
        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            ele.style.top = ele.offsetTop - pos2 + "px";
            ele.style.left = ele.offsetLeft - pos1 + "px";
        }
        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ページ上に紫色のボックスが表示されます。ボックス上でクリック＆ドラッグすることで、要素を移動できます。

JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

下の画像のように、ドラッグした位置へ自由にDIV要素を動かすことができます。

JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

コードの仕組み

ドラッグ機能は、以下の3つのイベント処理によって実現されています。

  • mousedown（押下時）：マウスボタンが押された瞬間のカーソル座標（clientX / clientY）を記録し、mousemoveとmouseupのリスナーをdocumentオブジェクトに登録します。e.preventDefault()により、テキスト選択などのデフォルト動作も防止しています。
  • mousemove（移動中）：直前のカーソル位置との差分を計算し、その値をもとに要素のtopとleftスタイルを更新します。これにより、要素がカーソルに追従して滑らかに移動します。
  • mouseup（解放時）：マウスボタンが離されたら、登録していたイベントリスナーを解除し、ドラッグ処理を終了します。

CSS側の重要なポイント

  • position: absolute：top・leftプロパティによる自由な配置変更を可能にするために必須の設定です。
  • cursor: move：要素上にカーソルを合わせたときに移動可能であることをユーザーに視覚的に伝えます。
  • z-index：他の要素よりも手前に表示されるよう優先度を高く設定しています。

この仕組みを応用すれば、モーダルウィンドウの移動や、フローティングパネル、簡易的なカンバンボードなど、さまざまなUIコンポーネントにドラッグ機能を追加できます。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini