溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html5中如何使用js實現(xiàn)拖拽功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
拖拽元素：可以為元素添加 draggable="true"來讓元素能夠被拖拽。
拖拽元素的事件監(jiān)聽：（應用于拖拽元素）
ondragstart當拖拽開始時調(diào)用
ondragleave 當鼠標離開拖拽元素時調(diào)用
ondragend 當拖拽結(jié)束時調(diào)用
ondrag 整個拖拽過程都會調(diào)用
目標元素：把元素A拖拽到元素B里，那么元素B就是目標元素。頁面中任何一個元素都可以成為目標元素。
目標元素的事件監(jiān)聽：（應用于目標元素）
ondragenter 當拖拽元素進入時調(diào)用
ondragover 當拖拽元素停留在目標元素上時，就會連續(xù)一直觸發(fā)（不管拖拽元素此時是移動還是不動的狀態(tài)）
ondrop 當在目標元素上松開鼠標時調(diào)用
ondragleave 當鼠標離開目標元素時調(diào)用
如果想讓拖拽元素在目標元素里做點事情，就必須要在 ondragover() 里加event.preventDefault()這一行代碼。
<!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('拖拽結(jié)束')
}
// box.ondrag = function () {
// console.log('在拖拽');
// }
// 應用于目標元素（想把 box 拖拽進去的地方）
var box2 = document.querySelector('.box2')
box2.ondragenter = function () {
console.log('進來了')
}
box2.ondragleave = function () {
console.log('離開了')
}
// 當拖拽元素在 目標元素上時，連續(xù)觸發(fā)
box2.ondragover = function (e) {
// 如果想讓拖拽元素在目標元素里做點事情，就必須要在 ondragover() 里加event.preventDefault()這一行代碼。
e.preventDefault()
console.log('over')
}
box2.ondrop = function () {
console.log('松開鼠標了')
}
</script>
</body>
</html><!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>效果展示
按下鼠標進行簡單的拖拽。
<!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>效果展示
<!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 則默認不發(fā)生實際移動
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>效果展示
感謝你能夠認真閱讀完這篇文章，希望小編分享的“html5中如何使用js實現(xiàn)拖拽功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼