HTML5中的拖拽以及使用原生js实现拖拽效果
1. HTML5中的拖拽
1.1 相关知识
拖拽元素：可以为元素添加draggable="true"来让元素能够被拖拽。
拖拽元素的事件监听：（应用于拖拽元素）
- ondragstart：当拖拽开始时调用
- ondragleave：当鼠标离开拖拽元素时调用
- ondragend：当拖拽结束时调用
- ondrag：整个拖拽过程都会调用
目标元素：把元素A拖拽到元素B里，那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。
目标元素的事件监听：（应用于目标元素）
- ondragenter：当拖拽元素进入时调用
- ondragover：当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动 的状态）
- ondrop：当在目标元素上松开鼠标时调用
- ondragleave：当鼠标离开目标元素时调用
如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。
1.2 拖拽基础案例
例：
<!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>
.box {
width: 200px;
height: 200px;
background: green;
}
.box2 {
position: relative;
left: 300px;
top: 50px;
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<div class="box2"></div>
<script>
// HTML5 拖拽
// 应用于拖拽元素
var box = document.querySelector('.box')
box.ondragstart = function () {
console.log('拖拽开始')
}
box.ondragleave = function () {
console.log('鼠标离开元素')
}
box.ondragend = function () {
console.log('拖拽结束')
}
// box.ondrag = function () {
// console.log('在拖拽');
// }
// 应用于目标元素（想把 box 拖拽进去的地方）
var box2 = document.querySelector('.box2')
box2.ondragenter = function () {
console.log('进来了')
}
box2.ondragleave = function () {
console.log('离开了')
}
// 当拖拽元素在 目标元素上时，连续触发
box2.ondragover = function (e) {
// 如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。
e.preventDefault()
console.
最低0.47元/天 解锁文章
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
