溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下前端html5中drag和drop怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
拖拽（Drag/Drop）是一個很普遍、很常用的操作，即抓取一個對象后，放到想要放的地方。 在H5中，拖拽是一個標準操作，任何元素都可以拖拽！！ 但是！！ 想要實現拖拽，需要添加 拖拽屬性。
H5中拖拽屬性：draggable： auto | true | false
注意：鏈接和圖片默認是可拖動的，則不需要 draggable 屬性。
- Drag（在拖拽目標時觸發事件）
dragstart - 元素開始拖動時觸發此事件
drag - 元素正在拖動時觸發此事件
dragend - 元素拖動結束后觸發此事件
- Drop（在目標區域釋放時觸發事件）
dragenter - 當被拖動的元素進入目標區域內時觸發此事件
dragover - 當被拖動的元素在目標區域內拖動時觸發此事件
dragleave - 當被拖動的元素離開目標區域時觸發此事件
drop - 當被拖動的元素在目標區域被放下時觸發此事件
設置元素屬性draggable 為 true：
<main class="main">
<div class="left" id="left">
<div class="txt-show">左邊區域</div>
<div class="dargable txt" id="txt1" draggable="true">可移動的文字一</div>
<div class="dargable txt" id="txt2" draggable="true">可移動的文字二</div>
<div class="dargable txt" id="txt3" draggable="true">可移動的文字三</div>
<div class="dargable txt" id="txt4" draggable="true">可移動的文字四</div>
<div class="dargable txt" id="txt5" draggable="true">可移動的文字五</div>
</div>
<div class="right" id="right">
<div class="txt-show">右邊區域</div>
</div>
</main>拖動
dragstart 事件： 在進行拖放操作時，通過dataTransfer來實現數據的存儲和獲取，每個event事件對象中都會有DataTransfer對象用來保存被拖動的數據。它可以保存一項或多項數據、一種或者多種數據類型。
let left = document.getElementById('left')
let target = document.getElementById('right')
left.addEventListener('dragstart', (event) => {
const target = event.target;
// 在項目拖動的開始事件(ondragstart)的時候，可以對dataTransfer進行設值操作(setData)。
// 拖拽， dataTransfer 屬性， 等于運輸車
// 后續用 dataTransfer.getData獲取
// 在項目拖動結束的時，可以獲取dataTransfer對象里的值。
event.dataTransfer.setData('Text', target.id)
// js 事件有冒泡機制
console.log('drag開始拖動啦1');
})drag事件：在拖拽過程中一直執行：
left.addEventListener('drag', (event) => {
console.log('drag正在拖啦2');
})dragend事件：結束：
left.addEventListener('dragend', (event) => {
console.log('dragend拖動結束啦7');
})放置
dragenter 和dragleave 事件：進入或離開目標區域：
target.addEventListener('dragenter', (event) => {
console.log('dragenter進入區域啦3')
})
target.addEventListener('dragleave', (event) => {
console.log('dragleave離開拖動區域啦5')
})dragover事件：默認無法將數據/元素放置到其他元素中。如果需要設置允許放置，就要阻止元素的默認行為。
target.addEventListener('dragover', (event) => {
// 阻止默認行為
event.preventDefault();
console.log('dragover在區域內拖動啦4')
})drop事件：放下
target.addEventListener('drop', (event) => {
console.log('drop釋放鼠標啦6')
let drag_id = event.dataTransfer.getData('text')
target.appendChild(document.getElementById(drag_id))
})<!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>
.main {
display: flex;
justify-content:space-around;
}
.left {
width: 300px;
height: 500px;
border: 1px solid lightseagreen;
margin-right: 10px;
/* background-color: green; */
}
.right {
width: 300px;
height: 500px;
border: 1px solid lightseagreen;
text-align: center;
padding: 1px;
/* background: red; */
}
.txt {
border: 1px solid gray;
margin: 1px;
padding: 5px;
cursor: move;
}
</style>
</head>
<body>
<main class="main">
<div class="left" id="left">
<div class="txt-show">左邊區域</div>
<div class="dargable txt" id="txt1" draggable="true">可移動的文字一</div>
<div class="dargable txt" id="txt2" draggable="true">可移動的文字二</div>
<div class="dargable txt" id="txt3" draggable="true">可移動的文字三</div>
<div class="dargable txt" id="txt4" draggable="true">可移動的文字四</div>
<div class="dargable txt" id="txt5" draggable="true">可移動的文字五</div>
</div>
<div class="right" id="right">
<div class="txt-show">右邊區域</div>
</div>
</main>
<script>
let left = document.getElementById('left')
let target = document.getElementById('right')
left.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('Text', target.id)
console.log('drag開始拖動啦1');
})
target.addEventListener('dragstart', (event) => {
const target = event.target;
event.dataTransfer.setData('Text', target.id)
})
left.addEventListener('drag', (event) => {
console.log('drag正在拖啦2');
})
left.addEventListener('dragend', (event) => {
console.log('dragend拖動結束啦7');
})
target.addEventListener('dragenter', (event) => {
console.log('dragenter進入區域啦3')
})
target.addEventListener('dragover', (event) => {
event.preventDefault();
console.log('dragover在區域內拖動啦4')
})
left.addEventListener('dragover', (event) => {
event.preventDefault();
})
target.addEventListener('dragleave', (event) => {
console.log('dragleave離開拖動區域啦5')
})
target.addEventListener('drop', (event) => {
let drag_id = event.dataTransfer.getData('text')
target.appendChild(document.getElementById(drag_id))
})
left.addEventListener('drop', (event) => {
let drag_id = event.dataTransfer.getData('text')
left.appendChild(document.getElementById(drag_id))
})
</script>
</body>
</html>dragstart事件中通過dataTransfer來實現數據的存儲和獲取，每個event事件對象中都會有DataTransfer對象用來保存被拖動的數據。在項目拖動的開始事件(ondragstart)的時候，可以對dataTransfer進行設值操作(setData)。event.dataTransfer.setData() 進行設值，在拖動結束后，可以通過event.dataTransfer.getData()獲取dataTransfer對象里的值。
瀏覽器默認無法將數據/元素放置到其他元素中，如果需要設置允許放置，就要阻止元素的默認行為。通過event.preventDefault()阻止。
可以通過添加css樣式進行對拖拽效果的改變。例：dragSrc.classList.add('ds') 。使用classList在元素中添加，移除及切換 CSS 類，classList 屬性是只讀的，但可以使用 add() 和 remove() 方法修改它。
使用 appendChild() 方法移除元素到另外一個元素。
HTML Drag and Drop API
DataTransfer()
HTML DOM appendChild() 方法
HTML DOM addEventListener() 方法
以上是“前端html5中drag和drop怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
