這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
在我的電腦中，回想一下我們想要把一個檔案拖動到另一個檔案夾是什么樣子的呢
1:滑鼠抓起檔案
2:拖動檔案到檔案夾上方
3:檔案夾高亮，表示到達指定位置
4:松開滑鼠將檔案夾放入檔案
下面就來一步步實作它吧??
一：讓我們的元素可拖動
方式一： draggable="true"
`<div draggable="true" >拖動我</div>`
方式二：-webkit-user-drag: element;
.dragdiv {
width: 100px;
height: 100px;
background-color: bisque;
-webkit-user-drag: element;
}
效果
二：讓檔案夾有高亮效果
給檔案夾添加偽類？
??如果你直接給檔案夾設定偽類:hover，會發現當拖動元素時，檔案夾的:hover是不會觸發的
??這是因為在拖拽元素時，拖拽操作和懸停操作是不同的事件型別，瀏覽器在處理拖拽操作時，會優先處理拖拽事件，而不會觸發懸停事件，拖拽操作是通過滑鼠點擊和拖拽來觸發的，而懸停事件是在滑鼠指標停留在一個元素上時觸發的，
所以我們就來對拖拽操作的事件型別做功課吧??
- dragstart：拖拽開始
- dragend：拖拽結束
- dragover：拖拽的元素在可放置區域內移動時觸發，即滑鼠指標在可放置區域內移動時持續觸發
- dragenter：拖拽的元素首次進入可放置區域時觸發
- dragleave：拖拽的元素離開可放置區域時觸發
- drop：當在可放置區域時，松開滑鼠放置元素時觸發
什么是可放置元素？
當你給元素設定事件：dragover、dragenter、dragleave、drop的時候
它就變成了可放置元素，特點是移到上面有綠色的?號
拖動高亮實作
1：我們給files檔案夾添加兩個回應事件：dragover和dragleave
ps: 這里用dragover事件而不用dragenter事件是為了后續能夠成功觸發drop事件2：當拖動元素進入可放置區域時，動態的給files添加類，離開時則移除類
// 顯示高亮類
.fileshover {
background-color: rgba(0, 255, 255, 0.979);
}
// 添加dragover事件處理程式，在可放置區域觸發
files.addEventListener('dragover', (event) => {
event.target.classList.add('fileshover');
});
// 添加dragleave事件處理程式，離開可放置區域觸發
files.addEventListener('dragleave', (event) => {
event.target.classList.remove('fileshover');
});
?? 恭喜你成功實作了移動到元素高亮的效果了
三：檔案資訊傳遞
檔案拖過去，是為了切換檔案夾，在這里你可能會進行一些異步的操作，比如請求后端更換檔案在資料庫中的路徑等，我們的需求多種多樣，但是歸根到底都是獲取到檔案的資料，并傳遞到檔案夾中，
DataTransfer物件
DragEvent.dataTransfer： 在拖放互動期間傳輸的資料
我們主要使用它的兩個方法：
DataTransfer.setData(format, data)：就是設定鍵值對，把我們要傳的資料添加到drag objectDataTransfer.getData(format)：根據鍵獲取保存的資料
知道了這兩個方法，相信你一定就有實作思路了 ??
拖拽開始 --> setData添加資料 --> 進入可放置區域 --> 放置時getData獲取資料 --> 完成
1：給檔案設定dragstart事件
// 開始拖拽事件
draggable.addEventListener('dragstart', (event) => {
const data = https://www.cnblogs.com/smileZAZ/archive/2023/04/28/event.target.innerText;
event.dataTransfer.setData('name', data); //添加資料
})
2：在dragover事件中用event.preventDefault()阻止默認行為，允許拖拽元素放置到該元素上，否則無法觸發drop事件// 添加dragover事件處理程式
files.addEventListener('dragover', (event) => {
event.target.classList.add('fileshover');
event.preventDefault(); //新增
});
3：給檔案夾設定放置事件drop
// 添加drop事件處理程式
files.addEventListener('drop', (event) => {
const data = https://www.cnblogs.com/smileZAZ/archive/2023/04/28/event.dataTransfer.getData('name'); // 獲取檔案的資料
const text = document.createTextNode(data);
files.appendChild(text);
event.target.classList.remove('fileshover'); // 記得放置后也要移除類
});
實作效果：
四：完整代碼：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.dragdiv {
width: 100px;
height: 100px;
background-color: bisque;
-webkit-user-drag: element;
}
.files {
width: 200px;
height: 200px;
background-color: rgba(0, 255, 255, 0.376);
margin-top: 100px;
}
.fileshover {
background-color: rgba(0, 255, 255, 0.979);
}
</style>
</head>
<body>
<div draggable="true" >我是檔案1</div>
<div >
<p>檔案夾</p>
拖動檔案名稱：
</div>
<script>
const draggable = document.querySelector('.dragdiv');
const files = document.querySelector('.files');
// 開始拖拽事件
draggable.addEventListener('dragstart', (event) => {
const data = https://www.cnblogs.com/smileZAZ/archive/2023/04/28/event.target.innerText;
event.dataTransfer.setData('name', data);
})
// 添加dragover事件處理程式
files.addEventListener('dragover', (event) => {
event.target.classList.add('fileshover')
event.preventDefault()
});
// 添加dragleave事件處理程式
files.addEventListener('dragleave', (event) => {
event.target.classList.remove('fileshover')
});
// 添加drop事件處理程式
files.addEventListener('drop', (event) => {
const data = https://www.cnblogs.com/smileZAZ/archive/2023/04/28/event.dataTransfer.getData('name')
const text = document.createTextNode(data)
files.appendChild(text);
event.target.classList.remove('fileshover')
});
</script>
</body>
</html>
本文轉載于:
https://juejin.cn/post/7210256070299549755
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551456.html
標籤：其他
上一篇：【解決】axios 下載檔案 Failed to read the 'responseText' property from 'XMLHttpRequest'
下一篇：返回列表