html5 拖拽及用 js 實現拖拽
阿新 • • 發佈:2020-10-22
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.log('over') } box2.ondrop = function () { console.log('鬆開滑鼠了') } </script> </body> </html>
1.3 將 A 在 B、C 之間拖拽
程式碼
<!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-b { width: 250px; height: 250px; background: green; } .cell-a { float: left; width: 50px; height: 50px; margin: 5px; text-align: center; line-height: 50px; border-radius: 50%; background: red; } .box-c { width: 200px; height: 200px; margin-top: 10px; background: skyblue; } </style> </head> <body> <p>boxB</p> <div class="box-b"> <div class="cell-a" draggable="true">1</div> <div class="cell-a" draggable="true">2</div> <div class="cell-a" draggable="true">3</div> <div class="cell-a" draggable="true">4</div> <div class="cell-a" draggable="true">5</div> </div> <p>boxC</p> <div class="box-c"></div> <script> var cellA = document.querySelectorAll('.cell-a') var boxB = document.querySelector('.box-b') var boxC = document.querySelector('.box-c') var temp = null cellA.forEach((cell, index) => { // 從 boxB 拖拽到 boxC cell.ondragstart = function () { // 保持當前拖拽的元素 temp = this } cell.ondragend = function () { temp = null } boxC.ondragover = function (e) { e.preventDefault() } boxC.ondragenter = function () { this.appendChild(temp) } // 從 boxC 拖拽到 boxB boxB.ondragover = function (e) { e.preventDefault() } boxB.ondragenter = function () { this.appendChild(temp) } }) </script> </body> </html>
效果展示
2. 用 js 實現拖拽
2.1 js 簡單拖拽
按下滑鼠進行簡單的拖拽。
程式碼
<!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 {
position: absolute;
width: 200px;
height: 200px;
background: green;
}
</style>
<script>
window.onload = function () {
var box = document.getElementById('box')
var disX = 0
var disY = 0
box.onmousedown = function (e) {
var e = e || window.event
disX = e.clientX - this.offsetLeft
disY = e.clientY - this.offsetTop
box.onmousemove = function (e) {
var e = e || window.event
box.style.left = e.clientX - disX + 'px'
box.style.top = e.clientY - disY + 'px'
}
box.onmouseup = function (e) {
console.log('end')
this.onmousemove = null
}
return false
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
效果展示
2.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 {
position: absolute;
width: 200px;
height: 200px;
background: skyblue;
}
.box1 {
position: absolute;
border: 1px dashed black;
opacity: 0.5;
}
.way-box {
position: absolute;
bottom: 30px;
right: 30px;
/* 無法選中 */
-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* 谷歌 */
-ms-user-select: none; /* IE */
user-select: none;
}
</style>
<script>
window.onload = function () {
;(function () {
var box = document.querySelector('.box')
var disX, disY, temp
var body = document.querySelector('body')
var way1 = document.querySelector('#way1')
var way2 = document.querySelector('#way2')
box.onmousedown = function (e) {
var e = e || window.event // 相容性寫法
disX = e.clientX - this.offsetLeft
disY = e.clientY - this.offsetTop
temp = document.createElement('div')
body.appendChild(temp)
temp.classList.add('box')
temp.classList.add('box1')
// 移動後位置會變,temp 的位置應該與 box 位置重合
temp.style.left = e.clientX - disX + 'px' // 記得加單位!
temp.style.top = e.clientY - disY + 'px'
temp.onmousemove = function (e) {
var e = e || window.event
temp.style.left = e.clientX - disX + 'px' // 記得加單位!
temp.style.top = e.clientY - disY + 'px'
}
temp.onmouseup = function (e) {
console.log('end')
this.onmousemove = null
// 1 則預設不發生實際移動
if (way2.checked) {
box.style.left = e.clientX - disX + 'px'
box.style.top = e.clientY - disY + 'px'
}
temp.style.display = 'none'
this.onmouseup = null
}
}
})()
}
</script>
</head>
<body>
<div class="box"></div>
<div class="way-box">
<p>請選擇拖拽的方式</p>
<input type="radio" id="way1" name="way" checked />
<label for="way1">1</label>
<input type="radio" id="way2" name="way" />
<label for="way2">2</label>
</div>
</body>
</html>
效果展示
有時會卡頓,未解決…