拖拽原理
H5拖拽有两个部分组成 拖拽元素 + 目标元素
ondragstart | 鼠标按下拖拽元素时触发 常用 一般在这个事件中存储数据 |
---|---|
ondrag | 在拖拽元素的过程中持续触发 |
ondragend | 鼠标抬起拖拽元素时触发 |
ondragenter | 当鼠标进入目标元素内部触发 |
---|---|
ondragover | 当鼠标在目标元素上部移动时持续触发 常用 |
ondragleave | 当鼠标离开目标元素内部时触发 |
ondrop | 当鼠标在目标元素抬起时触发 常用 |
注:浏览器的默认行为会阻止该事件 只要在dragover阻止这个默认行为 浏览器就能检测drop事件
oLeft.ondragover = function(e){
// console.log('dragover');
//阻止浏览器默认行为
e.preventDefault()
}
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
position:absolute;
width:100px;
height:200px;
}
#left{
left:0;
top:0;
background-color: hotpink;
}
#right{
right:0;
top:0;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="left">目标区域</div>
<div id="right" draggable="true">拖拽元素</div>
<script>
var oRight = document.getElementById('right')
var oLeft = document.getElementById('left')
oRight.ondragstart = function(){
console.log('dragstart');
}
oRight.ondrag = function () {
console.log('drag');
}
oRight.ondragend = function () {
console.log('dragend');
}
oLeft.ondragenter = function(){
// console.log('dragenter');
}
oLeft.ondragover = function(e){
console.log('dragover');
//阻止浏览器默认行为
e.preventDefault()
}
oLeft.ondrop = function(){
console.log('drop');
}
oLeft.ondragleave = function(){
console.log('dragleave');
}
</script>
</body>
</html>