ドラッグアンドドロップは、HTML5の後に別の位置にドラッグします。ドラッグアンドドロップは標準の標準部分です。 HTML5では、ユーザーはマウスを使用してドラッグ要素を選択し、要素を配置可能な要素にドラッグし、マウスボタンをこれらの要素に配置できます。抗力操作中、マウスポインターをドラッグできる半透明を示す半透明。
要素をドラッグできることを願っている場合は、ドラッグ可能なプロパティをTrueに設定する必要があります（Tag DraggableデフォルトはTRUEです））
イベントをドラッグアンドドロップしますドラッグアンドドロップ操作のさまざまな段階でいくつかのイベントがトリガーされ、ドラッグアンドドラッグインシデントのデータ転送属性は、関連データをドラッグアンドドロップ操作に保存するものとします。
| ドラッグスタート | [ソース要素]に対してアクティブになり、要素のドラッグを開始すると、ユーザードラッグ要素には追加のドラッグスタートイベントが必要です。このインシデントでは、リスナーは、データや画像のドラッグなど、このドラッグに関連する情報を設定します。 |
| ドラッグセンター | [ソースエレメント]に対してアクティブに、マウスが要素にドラッグするときにトリガーします。このインシデントのリスナーは、このエリアでマウスをリリースできるかどうかを示す必要があります。リスナーが設定されていない場合、またはリスナーが操作されていない場合、デフォルトでリリースすることは許可されていません。 |
| ドラッグオーバー | [ターゲット要素]でアクティブに、マウスが抗力で動いたときにトリガーします。 |
| ドラッグリーブ | [ターゲットエレメント]でアクティブに、マウスがドラッグして要素を離れるときにトリガーします。リリースできるハイライトまたは挿入マークとして使用できます。 |
| ドラッグ | [ソース要素]に対してアクティブに、イベントは要素がドラッグされるとトリガーされます。 |
| 落とす | [ターゲット要素]のアクティブ化、ドラッグ操作のリリースのリリース時にリリース要素をトリガーします。 |
| dragnd | [ソース要素]に対してアクティブに、操作が成功したかどうかに関係なく、ドラッグソースがドラッグ操作の終了時にトリガーされます。 |
（ドラッグするときは、ドラッグ関連のイベント、マウスイベントなどのマウスイベントのみがトリガーされますが、これはトリガーされません）
DatAtransferオブジェクトドラッグアンドドロップ操作を処理するときは、DataTransferオブジェクトを使用してドラッグデータを保存する必要があります。 DatAtransferは、1つ以上のデータ、1つ以上のデータ型を保存できます。
財産
| dropeffect | dropeffect [文字列]実際の配置効果、可能な値を指定します。 コピー：新しいポジションにコピーします 移動：新しい位置に移動します リンク：ソースから新しい位置へのリンクを作成する なし：配置が禁じられている（操作なし） |
| effectAllowed | [文字列]ドラッグ時に許容効果を指定します。 コピー：新しいポジションにコピーします。 移動：新しい位置に移動します。 リンク：ソースから新しい場所へのリンクを作成します。 Copylink：コピーまたはリンクを許可します。 Copymove：コピーまたは移動を許可します。 LinkMove：リンクを許可するか、移動します。 すべて：すべての操作を許可します。 なし：すべての操作が禁止されています。 非初期化：デフォルト値（デフォルト値）はすべてに相当します。 |
| ファイル | データ送信で利用可能なローカルファイルのリストが含まれています。ドラッグ操作にドラッグファイルが含まれない場合、この属性は空のリストです。 |
| 種類 | ストレージデータのタイプのリストを最初の項目として保存すると、順序はデータを追加する順序と一致しています。データが追加されていない場合、空のリストが返されます。 |
方法
| void addelement（要素要素） | ドラッグソースを設定します。通常、これを変更する必要はありません。デフォルトの目標は、ノードをドラッグすることです |
| void cleardata（文字列タイプ） | 特定のタイプに関連付けられたデータを削除します。タイプパラメーターはオプションです。タイプが空または不明の場合は、すべてのタイプの関連データを削除します。指定されたタイプのデータがない場合、またはデータ送信にデータが含まれていない場合、この方法には効果がありません。 |
| 文字列getData（文字列タイプ） | 特定のタイプのデータを取得します。指定されたタイプのデータが存在しない場合、またはデータがデータを含めることなく保存されている場合、メソッドは空の文字列を返します。 |
| void setData（文字列タイプ、文字列データ） | 特定のタイプのデータを設定します。データ型が存在しない場合、最後に追加され、このタイプリストの最後のプロジェクトは新しい形式になります。既に存在する場合は、既存のデータを同じ位置に置き換えます。つまり、同じタイプのデータが置き換えられると、タイプリストの順序は変更されません。 |
| void setdragimage（ドメレメント画像、長いx、long y） | 予想されるドラッグの写真をカスタマイズします。ほとんどの場合、ドラッグされたノードがデフォルトの画像として作成されるため、このアイテムを設定する必要はありません。 画像はドラッグフィードバック画像要素として使用する必要があります X画像の水平変位。 Y像の垂直オフセット。 |
ブラウザのサポート
Internet Explorer 9+、Firefox、Opera 12、ChromeおよびSafari 5+
デモコード
<！高さ：1pxの#ccccf.ソリッド#ccccff; > </div> <div class =＆nbsp; '） E.Datatransfer.EffectAllowed = 'Move'; True;ドラッグ要素は、ターゲット要素bin.ondragover = function（e）{e.preentdefault（）true; ';関数（e）{drag.parentnode.removechild（drag）; function（e）{e.preventdefault（）;上記は、それを必要とする友人のドラッグとドロップに関連する情報の導入です。