1.1-拖拽盒子 - 基本流程
思路分析
本小節知識點：滑鼠拖拽
- 復習滑鼠事件：
- onclick：滑鼠點下去并且彈起來觸發（單擊一次）
- ondblclick:滑鼠連續點擊兩次（雙擊）
- onmousedown：滑鼠按下就觸發
- onmouseup： 滑鼠彈起觸發
- onmouseover：滑鼠移入
- onmouseout：滑鼠移出
- onmousemove：滑鼠移動
- 滑鼠拖拽：（1）先按下 （2）然后移動 （3）最后松開
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子拖拽 - 基本流程</title>
<style>
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 盒子拖拽: 三步驟
const box = document.querySelector('.box')
// 1. 滑鼠按下: 記錄滑鼠相對位置
box.onmousedown = function (e) {
// console.log(e)
// 減去原來位置的目的: 為了能夠二次拖拽(如果只有一次性拖拽: 可以不用減去原有的偏移)
let x = e.pageX - parseInt(getComputedStyle(box).left)
let y = e.pageY - parseInt(getComputedStyle(box).top)
console.log(x, y)
// 上述代碼不夠優化: getComputedStyle(box)獲取box的全部樣式, 占用資源很多, 所以應該定義一個變數運行一次函式getComputedStyle()
// 2. 滑鼠移動: 一定在滑鼠按下的事件內部, 移動盒子
// 移動代表的是移動范圍: 給移動范圍物件增加移動事件
document.onmousemove = function (e) {
// 移動范圍: 整個頁面
box.style.left = e.pageX - x + 'px'
box.style.top = e.pageY - y + 'px'
}
// 3. 滑鼠松開: 一定在滑鼠按下的事件內容
// 給誰加的按下事件,給誰加松開事件
box.onmouseup = function () {
// 釋放document的移動事件
document.onmousemove = null
}
}
</script>
</body>
</html>
1.2-拖拽盒子02(元素有margin)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子拖拽 - 帶margin</title>
<style>
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: red;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 盒子拖拽: 三步驟
const box = document.querySelector('.box')
// 1. 滑鼠按下: 記錄滑鼠相對位置
box.onmousedown = function (e) {
// console.log(e)
// 減去原來位置的目的: 為了能夠二次拖拽(如果只有一次性拖拽: 可以不用減去原有的偏移)
let x = e.pageX - parseInt(getComputedStyle(box).left)
let y = e.pageY - parseInt(getComputedStyle(box).top)
// 如果被拖拽的盒子有margin: 不要使用offset系列(自動帶margin)
// let x = e.pageX - box.offsetLeft
// let y = e.pageY - box.offsetTop
console.log(x, y)
// 上述代碼不夠優化: getComputedStyle(box)獲取box的全部樣式, 占用資源很多, 所以應該定義一個變數運行一次函式getComputedStyle()
// 2. 滑鼠移動: 一定在滑鼠按下的事件內部, 移動盒子
// 移動代表的是移動范圍: 給移動范圍物件增加移動事件
document.onmousemove = function (e) {
// 移動范圍: 整個頁面
box.style.left = e.pageX - x + 'px'
box.style.top = e.pageY - y + 'px'
}
// 3. 滑鼠松開: 一定在滑鼠按下的事件內容
// 給誰加的按下事件,給誰加松開事件
box.onmouseup = function () {
// 釋放document的移動事件
document.onmousemove = null
}
}
// 但凡有盒子拖拽: 不用使用offset來獲取偏移,用getComuptedStyle()獲取真實的定位偏移
</script>
</body>
</html>
1.3-案例：拖拽登錄驗證
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子拖拽 - 登陸驗證</title>
<style>
.wrap {
width: 360px;
height: 180px;
margin: 50px auto;
border: 1px solid black;
position: relative;
}
.wrap .icon {
position: absolute;
left: 0;
top: 60px;
}
.wrap .progress {
width: 100%;
height: 40px;
position: relative;
top: -4px;
background-color: pink;
}
.cube {
position: absolute;
width: 40px;
height: 40px;
background-color: red;
cursor: pointer;
}
.bar {
position: absolute;
width: 0px;
height: 40px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<img src="./images/drag01.png" alt="">
<img class="icon" src="./images/drag02.png" alt="">
<div class="progress">
<div class="bar"></div>
<div class="cube"></div>
</div>
</div>
<script>
// 需求: 拖拽登錄驗證
// 細節1: 如果拖拽沒有到達目標 或者 超出目標: 登錄失敗(重繪頁面)
// 細節2: 拖動多少代表成功呢?
// 拖拽三步走
const wrap = document.querySelector('.wrap')
const icon = document.querySelector('.wrap .icon')
const bar = document.querySelector('.wrap .bar')
const cube = document.querySelector('.wrap .cube')
// 1. 滑鼠按下: 幾下滑鼠當前位置
cube.onmousedown = function (e) {
let x = e.pageX
// 2. 滑鼠移動: 在整個框中拖動, 給框添加滑鼠移動事件
// 考慮安全: 不能小于0, 也不能大于框的寬度
let distance = 0
wrap.onmousemove = function (e) {
distance = e.pageX - x
// 安全
if (distance < 0) distance = 0
if (distance > wrap.offsetWidth - cube.offsetWidth) distance = wrap.offsetWidth - cube.offsetWidth
icon.style.left = distance + 'px'
bar.style.width = distance + 'px'
cube.style.left = distance + 'px'
console.log(distance)
}
// 3. 滑鼠松開: 干掉移動事件, 判定拖動的距離是否滿足驗證條件
cube.onmouseup = function () {
wrap.onmousemove = null
// 判定移動了多少
if (distance >= 150 && distance <= 160) {
alert('驗證成功,正在跳轉')
location.assign('http://www.itcast.cn')
} else {
alert('驗證失敗,請再次驗證')
location.reload()
}
}
}
// 總結
// 一次性拖拽: 不要算相對位置, 終點位置 - 起始位置 即可
// mousemove里面的變數在mouseup中不能用: 要用,要提升變數
</script>
</body>
</html>```
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295434.html
標籤：其他
上一篇：介面測驗之postman工具基礎
下一篇：JavaScript知識盲區整理