```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<style>
#div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ff0000;
margin: 40px auto 0 auto;
line-height: 100px;
text-align: center;
color: #fff0df;
}
#container {
display: flex;
}
#container>div {
height: 200px;
width: 200px;
flex: 1;
border: 1px solid #000000;
padding-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div class="item 1">yellow</div>
<div class="item 2">green</div>
<div class="item 3">blue</div>
<div class="item 4">black</div>
</div>
<div draggable="true" id="div"></div>
<script>
const [div, conatiner] = [
document.getElementById('div'),
document.getElementById('container')
];
// ondragstart - 用户开始拖动元素时触发
div.ondragstart = function (e) {
div.innerHTML = 'dragstart';
conatiner.style.backgroundColor = 'rgba(255,0,0,.1)';
e.dataTransfer.setData('id', 'div');
}
// ondrag - 元素正在拖动时触发
div.ondrag = function (e) {
div.innerHTML = 'dragging';
}
// ondragend - 用户完成元素拖动后触发
div.ondragend = function (e) {
div.innerHTML = 'dragend';
conatiner.style.backgroundColor = 'rgba(255,0,0,0)';
}
// ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
conatiner.ondragenter = function (e) {
e.preventDefault();
e.target.style.backgroundColor = 'rgba(255,0,0,.3)';
//drop之前没有获取不到data对象
div.style.backgroundColor = e.target.innerHTML;
}
// ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
conatiner.ondragleave = function (e) {
e.preventDefault();
e.target.style.backgroundColor = 'rgba(255,0,0,0)';
}
// ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
conatiner.ondragover = function (e) {
e.preventDefault();
}
// ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
conatiner.ondrop = function (e) {
const target = e.target;
const id = e.dataTransfer.getData('id');
const div = document.getElementById(id);
div.style.backgroundColor = target.innerHTML;
target.appendChild(div);
}
</script>
</body>
</html>
```
网友评论