拖放（Drag 和 drop）是 HTML5 标准的组成部分。
事件概览
- dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
- drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid greenyellow;
margin-bottom: 30px;
}
img {
width: 50px;
}
</style>
</head>
<body>
<div
id="div1"
ondragover="allowDrag(event)"
ondrop="drop(event)">
</div>
<!-- 设置draggable为可拖动元素 -->
<img
id="dogImg"
src="../images/dog.jpg"
alt=""
draggable="true"
ondragstart="drag(event)"
"
>
<script>
// 主要用到三个drag事件
// dragstart 在开始拖放 鼠标点下的时候被触发
// dragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
// drop 当拖放完成,鼠标被释放的时候触发
// 设置drag data
// dataTransfer.setData() 方法用来设置拖放操作的drag data到指定的数据和类型。
// dataTransfer.getData() 方法接受指定类型的拖放（以DOMString的形式）数据。如果拖放行为没有操作任何数据，会返回一个空字符串。
// 形参ev 为DragEvent
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id)
// console.log(ev)
}
function allowDrag(ev) {
//默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。
ev.preventDefault();
// console.log(111)
}
function drop (ev) {
// 调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//把拉去的元素加到容器中
ev.target.appendChild(document.getElementById(data))
// console.log(111)
}
</script>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。