前言
我們在Day-7的時候有利用vue-draggable做出類似trello的拖動清單，今天我們則試試利用最基本的HTML/CSS/JS來打造一個屬於自己的draggable-list!
使用技術
- draggable API
- HTML5
- CSS3
- Javascript
專案說明
清單中是2019年的全球10個最有錢的傢伙，使用者可以利用拖曳去做排序，結束後再用下方的check order按鈕去檢查你的排序是否正確!
專案中用到了幾個draggable API的事件，以及一個偷懶用的reload功能。下表作個簡單個介紹
dragenter | 於一個元素或文字選取區塊被拖曳移動進入一個有效的放置目標時觸發。 |
| dragexit | 當一個元素不再是被選取中的拖曳元素時觸發。 |
| dragleave | 於一個元素或文字選取區塊被拖曳移動離開一個有效的放置目標時觸發。 |
| dragover | 於一個元素或文字選取區塊被拖曳移動經過一個有效的放置目標時觸發，一秒會觸發數十次。 |
| dragstart | 於使用者開始拖曳一個元素或文字選取區塊時觸發。為此你需要一個設置一個startIndex，之後你才能利用appendChild去做swap的操作。 |
| dragend | 於拖曳操作結束時觸發（如放開滑鼠按鍵或按下鍵盤的 escape 鍵)。同理你需要一個endIndex |
| drop | 於一個元素或文字選取區塊被放置至一個有效的放置目標時觸發。 |
| location.reload() | 刷新頁面的事件，我用在reset button上，原因在於我render list的時候是用正確答案的array打亂後再根據該陣列的每一個元素去產生一個li，也就是說每次render list都會產生10個新的li，最簡單的處理方法我想就是直接重整頁面了。 |
專案預覽
專案連結
github:https://github.com/windate3411/draggble-list
demo:https://windate3411.github.io/draggble-list/
參考文章
Danny的學習紀錄 