HTML Living Standard/draggable属性

draggable属性

draggable属性は、要素をドラッグ可能にするかどうかを指定するためのグローバル属性です。この属性を使用することで、要素をドラッグ＆ドロップ操作に対応させることができます。ドラッグ＆ドロップAPIと組み合わせることで、より高度な操作を実現できます。

基本構文

<element draggable="true"></element>
<element draggable="false"></element>
<element draggable="auto"></element>

属性値の説明

true: 要素をドラッグ可能にします。
false: 要素をドラッグ不可能にします。
auto: 要素のドラッグ可能性をブラウザのデフォルト動作に従わせます（特定の要素にのみ適用）。

使用例

以下に、draggable属性を使用した具体的な例を示します。

<div draggable="true">ドラッグ可能な要素です。</div>
<div draggable="false">ドラッグできない要素です。</div>
<img src="example.png" draggable="true" alt="ドラッグ可能な画像">

この例では、1つ目と3つ目の要素がドラッグ可能であり、2つ目の要素はドラッグ不可能に設定されています。

イベントとの連携

ドラッグ操作をカスタマイズするには、以下のイベントを使用できます。

dragstart: ドラッグ操作の開始時に発生します。
drag: ドラッグ中に継続的に発生します。
dragend: ドラッグ操作の終了時に発生します。
dragenter, dragover, dragleave, drop: ドロップ領域で使用するイベント。

使用例: カスタマイズされたドラッグ＆ドロップ

以下は、ドラッグ＆ドロップAPIを使用した例です。

<div id="dragItem" draggable="true">ドラッグ可能な要素</div>
<div id="dropZone" style="border: 2px dashed #ccc; padding: 20px;">ここにドロップしてください</div>

<script>
  const dragItem = document.getElementById("dragItem");
  const dropZone = document.getElementById("dropZone");

  dragItem.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", "ドラッグされたデータ");
  });

  dropZone.addEventListener("dragover", (e) => {
    e.preventDefault(); // デフォルトの動作を防ぎ、ドロップを許可
  });

  dropZone.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/plain");
    dropZone.textContent = `ドロップされた内容: ${data}`;
  });
</script>

この例では、要素をドラッグして指定の領域にドロップすると、ドロップされたデータが表示されます。

注意点

draggable属性は、画像やリンクなど、デフォルトでドラッグ可能な要素に対してデフォルト動作を上書きできます。
ドラッグ操作中にデータを渡すには、DataTransferオブジェクトを使用します。
ドロップ先の要素でdragoverイベントに対してpreventDefault()を呼び出さない場合、ドロップが許可されません。

互換性

互換性
ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献