以下实例显示了一个放置处理程序，它从拖动数据中获取源元素的 id，然后使用 id 将源元素移动到放置元素 - 在线编辑器

Web 接口
HTML Drag and Drop API - 使应用程序能够在浏览器中使用拖放功能
以下实例显示了一个放置处理程序，它从拖动数据中获取源元素的 id，然后使用 id 将源元素移动到放置元素

          <script>
function dragstart_handler(ev) {
 // 将目标元素的 id 添加到数据传输对象
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}
function dragover_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // 获取目标的 id 并将移动的元素添加到目标的 DOM
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
}
</script>

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">此元素是可拖动的。</p>
<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">放置区域</div>

        