HTMLのdraggable属性とは？使い方とサンプルコードを解説

HTMLのdraggable属性とは

HTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。

注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。

draggable属性に指定できる値

true … 要素をドラッグ可能にする
false … 要素をドラッグ不可にする
auto … ブラウザのデフォルト動作に従う

HTML draggable属性の使用例

以下の例では、8枚のピザを3:5の比率でAdamとPaulaに配分するデモを紹介します。「3/8」「5/8」の要素をドラッグし、それぞれの受け取りエリアへドロップすることで配分が完了します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM draggable</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    fieldset {
        min-height: 200px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    .options{
        display: inline-block;
    }
    #paulaShare {
        width: 200px;
        height: 70px;
        padding: 10px;
        border: 2px solid black;
    }
    #adamShare {
        width: 200px;
        height: 70px;
        padding: 10px;
        border: 2px solid black;
    }
</style>
    <script>
        function allowDrop(dragEvent) {
            dragEvent.preventDefault();
        }
        function drag(dragEvent) {
            dragEvent.dataTransfer.setData("Text", dragEvent.target.id);
        }
        function drop(dragEvent) {
            var data = dragEvent.dataTransfer.getData("Text");
            dragEvent.target.appendChild(document.getElementById(data));
            dragEvent.preventDefault();
        }
    </script>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-draggable</legend>
            <div class="options" id="paulaShare" ondrop="drop(event)"
            ondragover="allowDrop(event)">Paula's Share</div><br>
            <div class="options">
            <p id="optionOne" draggable="true" ondragstart="drag(event)">3/8</p>
            <p id="optionTwo" draggable="true" ondragstart="drag(event)">5/8</p>
            </div><br>
            <div class="options" id="adamShare" ondrop="drop(event)"
            ondragover="allowDrop(event)">Adam's Share</div>
            <div id="display">Distribute 8 pizza slices between Adam and Paula in ration 3:5</div>
</body>
</html>

実行結果

ドラッグ前の画面：

HTMLのdraggable属性とは？使い方とサンプルコードを解説

ドラッグ後の画面：

HTMLのdraggable属性とは？使い方とサンプルコードを解説

コードの解説

このサンプルでは、ドラッグ＆ドロップを実現するために以下の3つのJavaScript関数を使用しています。

allowDrop() … dragoverイベントでブラウザのデフォルト動作をキャンセルし、ドロップを許可します。
drag() … dragstartイベントで、ドラッグされた要素のIDをdataTransferオブジェクトに保存します。
drop() … dropイベントで保存されたIDを取得し、該当する要素をドロップ先のエリアに移動します。

このように、draggable属性を「true」に設定した要素と、dataTransferオブジェクトを組み合わせることで、JavaScriptだけのシンプルな記述でドラッグ＆ドロップ機能を実装できます。リストの並べ替えやファイルアップロードUIなど、さまざまな場面で応用できるので、ぜひ実際に試してみてください。

HTMLエディターとは？代表的な無料エディターの特徴を徹底解説

HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次
HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説
wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。構文 wrap属性の基本的な書き方は以下のとおりです。