實作可拖動 DOM 元素增添網站互動與趣味性
最初是看到 Glitch 網站 圖示像冰箱磁鐵可以隨意挪動的功能覺得充滿趣味，背後是使用 react-draggable 套件製作。不過考慮到速度與維護性，部落格不打算因為一頁特效就引入額外套件，所以從頭用 DOM API 手刻了相關功能。
最初是看到 Glitch 網站 圖示像冰箱磁鐵可以隨意挪動的功能覺得充滿趣味，背後是使用 react-draggable 套件製作。不過考慮到速度與維護性，部落格不打算因為一頁特效就引入額外套件，所以從頭用 DOM API 手刻了相關功能。
近期製作到內容大綱（Table of Contents）相關的功能，發現是一個很適合使用 Intersection Observer 的案例，透過監聽特定元素來自動更新目錄的狀態。在早期可能會需要透過 getBoundingClientRect 之類的方法來計算元素有沒有離開視窗，現在這樣的需求就變得更加容易實現。
這次我透過一步一步拆解解題路徑來描述如何解題。從基本解到分離資料與邏輯、保持 immutable 以及邊緣案例還有文件編寫都有涵蓋。打印出 1 到 100 的數字、假如數字是 3 的倍數，則打印 Fizz、假如數字是 5 的倍數，則打印 Buzz、假如數字是 3 和 5 的公倍數，則打印 FizzBuzz。
待辦事項是非常常見的習題，其中需求含括了增、刪、讀、改資料，充分的模擬到未來在操縱資料時會碰上的各種情境與問題。可以說各式各樣的軟體都是一種客製化的待辦事項，透過製作待辦事項足以熟悉編寫應用的方方面面，跟著步驟寫一次來練習基本的應用撰寫。