# 拖拽
拖拽會觸發相關事件，就像 mouse 相關的事件一樣
- dragstart 拖動開始，該事件新增到被拖動的元素
- dragenter 拖動行為到達某元素上方，該事件新增到被滑鼠拖動時經過的元素
- dragleave 與上一條相對應
- dragover / dragout 這裡需要注意的是，某些時候即便不需要使用這兩個事件，也可能會觸動事件預設行為，可能需要手動禁用其預設行為
- drop 拖動結束事件，新增到拖動放置的元素上面以觸發相關行為
從作業系統桌面拖動檔案到瀏覽器，同樣會觸發拖動事件。我們需要做的就是在 drop 事件觸發以後，從事件物件中獲取到被拖拽的檔案
如果拖動圖片到 div 上後鬆手，總是會在新標籤頁中開啟圖片，那麼嘗試把 div 換成 input 吧，type 屬性設定為 file 即可。
# 剪貼簿
獲取剪貼簿中的檔案，同樣需要透過一個事件，paste 事件 -> Element：paste 事件 - Web API | MDN
一般情況下，只有在游標位於可編輯區域時，才會用到貼上來貼上文字。如果要轉化貼上內容，需要阻止事件的預設行為。
如果要獲取剪貼簿中的圖片來進行上傳，可以將 paste 事件新增到 window 或者 document 物件上面
如果頁面中防止了 input 元素，這裡注意將 input 元素的 click 事件的預設行為進行阻止，避免使用者點選時開啟檔案選擇器，當然如果這本來就是需要的，則無需此動作。
# 複製到剪貼簿的控制
上面透過 paste 事件可以獲取剪貼簿中的內容
同樣的，可以透過 copy 事件來操控將要被複制到剪貼簿中的內容
copy 事件 -> Element：copy 事件 - Web API | MDN
事件處理器可以透過呼叫 ClipboardEvent.clipboardData 屬性上的 setData(format, data) 修改剪貼簿內容，並透過 event.preventDefault() 取消預設行為。