前言
之前學習了HTML5的拖放事件，開發中也用到了拖拽組件。爲了釐清整體的邏輯，專門做了一個小例子。
具體實現的效果也很簡單：元素可以在容器中任意拖動，元素被移入容器的時候，還會有相關樣式的改變已達到更好的展示效果。
例子基本運用了拖放事件的全部事件，並且儘量簡潔的展示了出來。特此記錄。
拖放事件介紹
由名字可以看出來，拖放事件由2部分組成：拖動和釋放。
而拖動又由2部分組成，分別是被拖動元素的相關事件和元素容器的相關事件。
1、被拖動元素的相關事件 ：
| 事件名稱 | 說明 |
|---|---|
| dragstart | 在元素開始被拖動時候觸發 |
| drag | 在元素被拖動時反覆觸發 |
| dragend | 在拖動操作完成時觸發 |
2、容器的相關事件 ：
| 事件名稱 | 說明 |
|---|---|
| dragenter | 當被拖動元素進入目的地元素所佔據的屏幕空間時觸發，一般需要取消瀏覽器的默認行爲。 |
| dragover | 當被拖動元素在目的地元素內時觸發，一般需要取消瀏覽器的默認行爲。 |
| dragleave | 當被拖動元素沒有放下就離開目的地元素時觸發 |
3、釋放事件 ：
| 事件名稱 | 說明 |
|---|---|
| drop | 當被拖動元素在目的地元素裏放下時觸發，一般需要取消瀏覽器的默認行爲。 |
效果展示
爲了方便說明，先看代碼實現的效果。請前往 Github倉庫 下載 demo.html 和 demo.js 到本地，然後用Chrome打開html文件，初始效果如下圖：
將圖中的可拖拽元素，拖放到下面的容器中，這個過程的效果如下所示。箭頭表示拖拽方向，方框代表動態改變的容器樣式。
最後，鬆開鼠標，將元素放入到下面的容器中，整個過程完成。
代碼實現
首先，先編寫html代碼。因爲元素可以在兩個容器之間任意拖動，因此這兩個容器都需要監聽drapenter、dragover、dragleave、drop這四個事件。
被拖拽元素的 draggable 屬性需要指明爲 true ，纔可以被拖拽。同時爲了記錄一些信息，需要監聽dragstart事件。
<body>
<script src="./demo.js"></script>
<div
class="container"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondragleave="onDragLeave(event)"
ondrop="onDrop(event)"
>
<div id="target" draggable="true" ondragstart="onDragStart(event)">
被拖拽元素
</div>
</div>
<div
class="container"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondragleave="onDragLeave(event)"
ondrop="onDrop(event)"
></div>
</body>爲了讓拖拽效果更明顯，實現效果展示->第二部分的，拖拽元素進入一個新的容器的時候，新容器展示陰影效果。編寫陰影效果樣式：
<style>
.container {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #aaaaaa;
margin-bottom: 10px;
transition: box-shadow .3s ease;
}
#target {
width: 50px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
}
.container.active {
border-bottom-width: 0;
box-shadow: 0 10px 6px -6px #777;
}
</style>最後，編寫 demo.js 代碼。具體邏輯請看代碼中的註釋信息：
let target = null,
container = null
// 尋找拖拽元素的容器類
function findParentContainer(node) {
if(!node || node === document) {
return null
}
if(node.classList.contains('container')) {
return node
}
return findParentContainer(node.parentNode)
}
// 元素開始被拖拽時, 標記元素原生的容器類
function onDragStart(event) {
target = event.target
container = findParentContainer(target)
}
// 元素進入目的容器時, 如果不是原來的容器, 則可以放置
// 此時更改樣式, 以更好向用戶展示
function onDragEnter(event) {
event.preventDefault()
if(event.target !== container) {
event.target.classList.add('active')
}
}
// 元素在目的容器內時觸發
function onDragOver(event) {
event.preventDefault()
}
// 元素離開目的容器, 需要移除相關樣式
function onDragLeave(event) {
event.preventDefault()
event.target.classList.remove('active')
}
// 元素被放置在目的容器, 添加DOM節點, 移除相關樣式
function onDrop(event) {
event.preventDefault()
event.target.appendChild(target)
event.target.classList.remove('active')
target = null
container = null
}參考鏈接
- 代碼地址: Github
- 《HTML5拖放》
- 《HTML5原生拖拽/拖放》
更多系列文章
《前端知識體系》
- JavaScript基礎知識梳理(上)
- JavaScript基礎知識梳理(下)
- ES6重難點整理
- 談談promise/async/await的執行順序與V8引擎的BUG
- 前端面試中常考的源碼實現
- Flex上手與實戰
- ......
《設計模式手冊》
《Webpack4漸進式教程》