---
title: DragEvent
slug: Web/API/DragEvent
tags:
  - API
  - DragEvent
  - Reference
  - drag and drop
translation_of: Web/API/DragEvent
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>

<p><strong><code>DragEvent</code></strong> インターフェイスは、ドラッグアンドドロップの対話を表す {{domxref("Event","DOM イベント")}}です。ユーザーはタッチ面でポインティングデバイス (マウスなど) を置くことによりドラッグを開始して、ポインタを新たな場所 (別の DOM 要素など) にドラッグします。アプリケーションは独自の方法で、ドラッグアンドドロップの操作を自由に解釈できます。</p>

<p class="note">このインターフェイスは、{{domxref("MouseEvent")}} および {{domxref("Event")}} のプロパティを継承します。</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
 <dd>ドラッグアンドドロップの操作で動かされているデータです。</dd>
</dl>

<h2 id="Constructors" name="Constructors">コンストラクター</h2>

<p class="note">このインターフェイスにはコンストラクターがありますが、役に立つ DataTransfer オブジェクトをスクリプトから作成することはできません。これは {{domxref("DataTransfer")}} オブジェクトに、ドラッグアンドドロップ中にブラウザーによって調整される処理やセキュリティのモデルがあるためです。</p>

<dl>
 <dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
 <dd>本物ではなく、また信頼されていない DragEvent を作成します。</dd>
</dl>

<h2 id="Event_types" name="Event_types">イベントタイプ</h2>

<dl>
 <dt>{{event('drag')}}</dt>
 <dd>このイベントは、要素や選択テキストがドラッグされているときに発生します。</dd>
 <dt>{{event('dragend')}}</dt>
 <dd>このイベントは、(マウスボタンを離したり、Esc キーを押下して) ドラッグ操作が終了したときに発生します。</dd>
 <dt>{{event('dragenter')}}</dt>
 <dd>このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先に入ったときに発生します。</dd>
 <dt>{{event('dragexit')}}</dt>
 <dd>このイベントは、要素がドラッグ操作の直接的な選択対象ではなくなったときに発生します。</dd>
 <dt>{{event('dragleave')}}</dt>
 <dd>このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先から出たときに発生します。</dd>
 <dt>{{event('dragover')}}</dt>
 <dd>このイベントは、要素や選択テキストが有効なドロップ先の上をドラッグされたときに (マウスが動いていない場合は 50 ミリ秒ごとに、それ以外は 5 ミリ秒ごと (遅い動作) か 1 ミリ秒ごと (速い動作) の間隔です。この発生パターンは {{Event("mouseover")}} とは異なります) 発生します。</dd>
 <dt>{{event('dragstart')}}</dt>
 <dd>このイベントは、ユーザーが要素や選択テキストのドラッグを開始したときに発生します。</dd>
 <dt>{{event('drop')}}</dt>
 <dd>このイベントは、要素や選択テキストが有効なドロップ先にドロップされたときに発生します。</dd>
</dl>

<h2 id="GlobalEventHandlers" name="GlobalEventHandlers">GlobalEventHandlers</h2>

<dl>
 <dt>{{domxref('GlobalEventHandlers.ondrag')}}</dt>
 <dd>{{event('drag')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
 <dd>{{event('dragend')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
 <dd>{{event('dragenter')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
 <dd>{{event('dragexit')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
 <dd>{{event('dragleave')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
 <dd>{{event('dragover')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
 <dd>{{event('dragstart')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラー')}}。</dd>
 <dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
 <dd>{{event('drop')}} イベントの {{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
</dl>

<h2 id="Example" name="Example">例</h2>

<p>各プロパティ、コンストラクター、イベントタイプおよびグローバルイベントハンドラーの例は、それぞれのリファレンスページに掲載しています。</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#dragevent", "DragEvent")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>最初の定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>



<p>{{Compat("api.DragEvent")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<p>{{page("/ja/docs/Web/API/DataTransfer", "See also")}}</p>