draggable属性

要素は、ドラッグの可否を指定することもできます。

本ページでは、グローバル属性のdraggableについて説明します。

draggable属性とは

draggableは、ドラッグすることを可能にしたり、不可にしたりできます。

ドラッグとは、マウスを左クリックしたまま移動させることです。ファイルをコピーする時に使う、ドラッグ&ドロップのドラッグと同じです。

デフォルトでドラッグ可能なのは、画像、テキストを範囲選択した後(左クリックしたまま選択したい文字範囲で動かすと色が付きます)、リンクなどです。ドラッグすることで、以下ができます。

【ブラウザ上でドラッグするとでできること】
対象	できることの例
画像	デスクトップやエクスプローラにドロップすると、画像をコピーできます。
範囲選択したテキスト	エディタにドロップすると、テキストをコピーできることがあります。
リンク	デスクトップやエクスプローラにドロップすると、リンクへのショートカットが作れます。

draggableで値をfalseにすると、これらの操作を不可にできます。また、他の要素で値をtrueにすると、ドラッグ可能にもできます。

グローバル属性のため、すべてのHTML要素で使えます。

draggableの利用例は、以下のとおりです。

【draggableの利用例(p要素)】

<p draggable="true">ドラッグできます。</p>

上記により、テキストを範囲選択した状態でなくてもドラッグが可能になります。

もう1つの例です。

【draggableの利用例(画像)】

<img draggable="false" src="image.png" alt="画像です">

上記により、画像がドラッグできなくなります。

実行例は、以下のとおりです。

ドラッグできません。

ドラッグできます。

上は、draggableを使っていません。このため、テキストを範囲選択しないとドラッグできないと思います。

下は、draggable="true"を使っています。このため、テキストを範囲選択しなくてもドラッグできると思います。

もう1つの実行例です。

上の画像(スペードのA)は、draggableを使っていません。画像は、デフォルトがドラッグできるため、ドラッグできると思います。

下の画像(ハートのA)は、draggable="false"を使っています。このため、ドラッグできないと思います。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
draggable	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
draggable	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。