コメント：dationdefault（）を呼び出して、ブラウザのデータのデフォルト処理（ドロップイベントのデフォルト動作がリンク形式で開かれます）を回避し、DataTransfer.getData（テキスト）メソッドを介してドラッグされたデータが取得されます。興味のある友達はそれを参照できます。
元の効果
ドラッグ後の効果
コードは次のとおりです
[コード]
<！doctype html>
<html>
<head>
<style type = "text/css">
＃div1、＃div2
{float：左;幅：100px;高さ：35px;マージン：10px;パディング：10px;境界線：1px solid #aaaaa;}
</style>
<script type = "text/javascript">
関数AlowDrop（EV）
{
ev.preventdefault（）;
}
関数ドラッグ（EV）
{
ev.datatransfer.setdata（ "Text"、ev.target.id）;
}
関数ドロップ（EV）
{
ev.preventdefault（）;
var data = ev.datatransfer.getData（ "テキスト"）;
ev.target.appendChild（document.getElementById（data））;
}
</script>
</head>
<body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" ondragstart = "drag（event）"/>
<div ondrop = "drop（event）" ondragover = "lowtdrop（event）">
</div>
<div ondrop = "drop（event）" ondragover = "lowtdrop（event）"> </div>
</body>
</html>
[/コード]
少し複雑に思えるかもしれませんが、ドラッグアンドドロップイベントのさまざまな部分を個別に研究できます。
要素をドラッグアンドドロップに設定します
まず、要素をドラッグ可能にするために、ドラッグ可能なプロパティをtrueに設定します。
<img draggable = "true" />
何をドラッグするか-OndragstartとsetData（）
次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、OndragStartプロパティは、ドラッグされているデータを指定する関数であるドラッグ（イベント）を呼び出します。
DataTransfer.setData（）メソッドは、ドラッグされたデータのデータ型と値を設定します。
関数ドラッグ（EV）
{
ev.datatransfer.setdata（ "Text"、ev.target.id）;
}
この例では、データ型はテキストであり、値はDraggable要素（drag1）のIDです。
どこに置くか - ondragover
Ondragoverイベントでは、ドラッグされたデータを配置する場所を指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。許可を設定する必要がある場合は、要素のデフォルトの処理をブロックする必要があります。
これは、event.preventdefault（）ondragoverイベントのメソッドを呼び出すことによって行われます。
event.preventdefault（）
配置を行う - オンドロップ
ドロップデータが配置されると、ドロップイベントが発生します。
上記の例では、Ondropプロパティは関数、ドロップ（イベント）を呼び出します。
関数ドロップ（EV）
{
ev.preventdefault（）;
var data = ev.datatransfer.getData（ "テキスト"）;
ev.target.appendChild（document.getElementById（data））;
}
コード説明：
DataTransfer.getData（テキスト）メソッドを介してドラッグされたデータを取得するために、ブラウザのデータのデフォルト処理（ドロップイベントのデフォルト動作がリンク形式で開かれます）を回避するために、PreventDefault（）を呼び出します。このメソッドは、setData（）メソッドのデータセットを同じタイプに返します。ドラッグされたデータは、ドラッグされた要素（drag1）のIDであり、ドラッグされた要素を配置要素（ターゲット要素）に追加します