html5は要素のドラッグと配置を実現します

例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>html5实现元素的拖动和摆放</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>拖动图片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

実行結果：

1.要素をドラッグアンドドロップするように設定します

まず、要素をドラッグ可能にするには、ドラッグ可能な属性をtrueに設定します。

<img draggable="true">

2.何をドラッグするか-ondragstartとsetData（）

次に、要素をドラッグしたときに何が起こるかを指定します。
上記の例では、ondragstart属性は、ドラッグするデータを指定する関数drag（event）を呼び出します。
dataTransfer.setData（）メソッドは、ドラッグされたデータのデータ型と値を設定します。

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

テキストは、ドラッグオブジェクトに追加されるドラッグデータのタイプを表すDOMStringです。値は、ドラッグ可能な要素（ "drag1"）のIDです。

3.それを置く場所-ドラッグオーバー

ondragoverイベントは、ドラッグされたデータをドロップする場所を指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。許容される配置を設定する必要がある場合は、要素のデフォルトの処理を防ぐ必要があります。
これは、ondragoverイベントのevent.preventDefault（）メソッドを呼び出すことによって行われます。

event.preventDefault()

4.配置-オンドロップ

ドラッグされたデータがドロップイベントが発生するときに配置されると。上記の例では、ondropプロパティは関数drop（event）を呼び出します。

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

コードの説明：

ブラウザーのデフォルトのデータ処理を回避するには、preventDefault（）を呼び出します（dropイベントのデフォルトの動作は、リンクとして開くことです）。
dataTransfer.getData（ "Text"）メソッドを介してドラッグされたデータを取得します。このメソッドは、setData（）メソッドで同じタイプのデータセットを返します。
ドラッグされたデータは、ドラッグされた要素（ "drag1"）のIDです。
追加要素をドラッグしドロップ素子（対象要素）