HTMLElement: draggable プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

draggableHTMLElement インターフェイスのプロパティで、要素がドラッグ可能かどうかを示す論理値プリミティブを取得または設定します。

これは、dragableHTML グローバル属性の値を反映します。 It reflects the value of the draggable HTML global attribute.

論理値プリミティブで、要素がドラッグ可能であれば true、そうでなければ false です。

次の例は、スクリプトによる要素のドラッグ機能を有効または無効にする方法を示しています。

js
const draggableElement = document.querySelector(".draggable-element");
const notDraggableElement = document.querySelector(".not-draggable-element");

// 対象とする要素のドラッグ機能を有効にする
if (!draggableElement.draggable) {
  draggableElement.draggable = true;
}

// 対象とする要素のドラッグ機能を無効にする
if (notDraggableElement.draggable) {
  notDraggableElement.draggable = false;
}

仕様書

Specification
HTML
# dom-draggable

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
draggable

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報