标签属性
draggable:true
事件
被拖动的源对象可以触发的事件
- ondragstart:被拖动
- ondrag:被拖动过程中
- ondragend:源对象被拖动结束
被拖动的源对象可以触发的事件
- ondragstart:被拖动**
- ondrag:被拖动过程中
- ondragend:源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件
- ondragover:目标对象悬停在源对象上方 (return false)阻止默认事件
- ondragleave:目标对象被拖拽离开源对象
- ondrop :目标对象在源对象上松手
- ondragenter:被拖动进入
event.target 同当前this
```css
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:last-child {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖拽内容1</p>
<p id="p2" draggable="true">拖拽内容2</p>
<p id="p3" draggable="true">拖拽内容3</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<!--
事件:onclick onmouseover/onmouseout onmousemove/onmouseenter onload onchange onfocus/onblur onscroll
-->
<script>
// 当选中的元素被拖动时
var obj = {}
document.ondragstart = function(e) {
obj = e.target
console.log("被拖动");
document.getElementById("p1").ondragstart = function() {
console.log("被拖动");
}
// 当选中的元素拖拽过程中
document.getElementById("p1").ondrag = function() {
console.log("被拖动过程");
}
// 当选中的元素结束
document.getElementById("p1").ondragend = function() {
console.log("被拖动结束");
}
//目标对象被拖拽进入
document.getElementById("div2").ondragenter = function() {
console.log("被拖动进入");
}
//目标对象悬停在源对象上方
document.ondragover = function(e) {
console.log("目标对象悬停在源对象上方");
// div = e.target
// 阻止默认事件
e.preventDefault()
}
// 目标对象被拖拽离开源对象
document.getElementById("div3").ondragleave = function() {
console.log("目标对象被拖拽离开源对象");
}
//目标对象在源对象上松手
document.ondrop = function() {
console.log(1);
event.target.appendChild(obj)
}
}
</script>
</body>
</html>