ドラッグアンドドロップは一般的な機能です。つまり、キャプチャオブジェクトの後に別の位置にドラッグします。
HTML5では、ドラッグアンドドロップは標準部品であり、任意の要素をドラッグしてドロップできます。
Internet Explorer 9+、Firefox、Opera、Chrome、およびSafariサポートドラッグ。
注： Safari 5.1.2はドラッグをサポートしていません。例：
<！ Style> <script> function alowdrop（ev）{ev.preventdefault（）;} function drag（ev）{ev.datatransfer.setdata（text、evraget.id）;} function op（ev）{ev。 var data = ev.datatransfer.getData（TEXT）; = drag1 src = img /bg_1.jpg draggable = true ondragstart = drag（event）width = 300px heig ht = 180px /> < /body> < /html>まず、要素をドラッグするために、ドラッグ可能なプロパティをtrueに設定します。<img draggable = true>
次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、 OndragStartプロパティは、ドラッグされたデータを指定する関数（イベント）を呼び出します。
datAtransfer.setData（）メソッドデータのデータ型と値を設定します。関数drag（ev）{ev.datatransfer.setdata（text、ev.target.id）;}この例では、データ型はテキストであり、値は要素をドラッグできるID（drag1）です。
Ondragoverイベントは、ドラッグされたデータを配置する場所を規定しています。デフォルトでは、データ/要素を他の要素に配置することはできません。許容配置を設定する必要がある場合は、要素のデフォルト処理を防ぐ必要があります。
これは、event.preventdefault（） ondragoverイベントのメソッドを呼び出すことです：event.preventdefault（）
ドラッグデータが配置されると、ドロップイベントが発生します。
上記の例では、Ondrop属性は関数、 Drop（event）を呼び出します。
function drop（ev）{ev.preventdefault（）;コード説明：
Dateのブラウザのデフォルト処理を回避するには、 PreventDefault（）に電話してください（ドロップイベントのデフォルト動作がリンクで開かれます）
DataTransfer.getData（テキスト）メソッドを介してドラッグされたデータを取得します。この方法は、SetData（）メソッドの同じタイプの任意のデータに戻ります。
ドラッグデータはドラッグ要素のIDです（drag1）
配置要素への追加のドラッグ要素（ターゲット要素）
前後にドラッグ：2つの場所で前後にドラッグする場合は、上記のコードを変更するだけです。
ボディのコードを変更します：
<body> <div id = div1 ondrop = drop（event）ondragover = lowtdrop（event）> <img id = drag1 src = img/bg_1.jpg draggable = true vent = 300px height = 180px/> </div> <div id = div2 ondrop = drop（event）ondragover = lowtdrop（event）> </div> </body>
次に、スタイルスタイルに＃div2を追加します。
<スタイルタイプ/CSS>＃div2 {width：360px;これは前後にドラッグできます。
上記は、この記事のすべての内容です。