<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
<script>
function dragstart_handler(ev) {
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dropEffect = "move";
}
function dragover_handler(ev) {
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
// console.log("data",data);// p1
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
拖拽后的结构:
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p></div>
更多信息见:https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API