# Drag and Drop Web API 拖拖拉拉

要可以拖拉元素，首先必須在要拖拉的元素上設置==屬性==！
- 在要拖拉的元素設置 draggable="true"
- 在要放置的元素設置 droppable="true"

像這樣子～

<div draggable="true" class=" box box-dragger"></div>
<div droppable="true" class="box box-dropper"></div>

## draggable 的元素事件
### dragStart
會在滑鼠拖它的第一時間觸發。

### dragEnd
會在滑鼠結束拖它的時間觸發。

### drag
會在拖曳期間持續觸發。

組合技大概會像這樣 ><


## droppable 的元素事件
### dragEnter
draggable 元素進入 droppable 元素時觸發

### dragLeave
draggable 元素離開 droppable 元素時觸發

### dragOver
會在拖曳期間持續觸發。

## drop 事件
也就是元素成功被拖曳，並放置到目標元素上時觸發！

需要注意的是：必須要在目標容器，dragOver 的元素上設置 event.preventDefault()，才可以讓 [drop](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/drop_event) 事件生效。

## drop 事件觸發了，但怎麼做到 ui 呈現？
1. 於 dragstart 事件觸發時，將 e.target（被拖的那個元素）先存到一個變數中
2. 於 drop 事件觸發時，利用 appendChild，將 1. 加到目標放置元素中

dropper.addEventListener("dragover",function(e){
   e.preventDefault()
	// dragover 中一定要先對目標元素設置防止預設行為～
})

let dragTemp;
dragger.addEventListener("dragstart",function(e){
  dragTemp = e.target
  console.log(dragTemp)
})

dropper.addEventListener("drop",function(e){
  dropper.appendChild(dragTemp)
})

## 範例玩一下
https://codepen.io/Jamixcs/pen/YPKwpqZ?editors=1010

## 參考文件
- [就是要一起拖拖拉拉！(一) - 瀏覽器 Drag and Drop API 操作](https://www.muji.dev/2020/02/28/web-dnd-1/
)
- [MDN Drop 事件](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/drop_event)