Draggable To-Do List｜可拖曳的待辦事項清單
閱讀時間約 2 分鐘
簡介
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單，由於本身的使用需求，不斷調整和優化 Todo 清單的外觀與功能，如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持，以及對 XSS 跨網站指令程式碼的防禦處理。最後再加上動畫和互動音效，讓你達成任務時成就感滿滿！現在就開始規劃你的一天 🙂
外觀與互動設計
- 設計上淡化勾選方塊顏色，並選用較密集的 Roboto Condensed 字體，讓視線更集中於任務
- 加入任務拖曳與排序功能
- 將過長或連字的段落 (例如 `THISISAPARAGRAPHWITHOUTSPACE`) 強制換行，維持待辦清單任務的一致性
- 加入 Markdown Link 轉譯 功能，讓使用者能夠輕鬆地使用 Markdown 語法創造附帶網址連結的任務
- 除了將勾選完成的任務以灰色字和刪除線表示，另外使用灰階對 Emoji 做去色處理
- 針對新增任務框做優化，使其在任何操作後自動集中 (focus)，省去為了新增任務的額外點擊
- 任務超過十項時，鎖住新增任務框的輸入：好的待辦事項在於清楚、必要和可完成性，重新檢視待辦事項清單讓我們能更適切地為一整天規劃安排
- 加入新增、拖移、刪除互動音效、甚至是達成任務時的《薩爾達：荒野之息》經典音效；當取消勾選任務時，音效於 0.5 秒內逐步靜音，優化使用體驗
- 加入 LottieFiles 的 SVG 彩蛋動畫，達成任務時成就感滿滿！
開發紀錄
- 使用預處理器 Sass 撰寫 CSS
- 使用 JavaScript `class` 物件導向開發
- 使用 HTML 屬性 `contenteditable` 達成即時編輯，並且在貼上文字時使用 `HTML DOM execCommand()` 方法 達成純文字貼上
- 對使用者輸入和輸出做 過濾處理，避免 XSS 跨網站指令碼注入
- 加入 LocalStorage 儲存功能，關掉瀏覽器也不怕任務丟失！
- 使用 SortableJS 實現任務拖曳 (drag) ，並在移動任務的同時達成任務排序和資料儲存
- 透過設定計時器無聲播放音檔進行緩存，音效永不延遲
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
透過 No Code 自動化建立「待辦事項 AI 助理」，你只要上傳語音檔在 LINE 聊天室，AI 即自動摘要語音內容，同時新增待辦事項在 Todoist 待辦事項 APP，讓你管理任務更輕鬆！即使臨時接收口頭任務交付，或當下忙著處理別的事情，也能輕鬆建立待辦事項！
此文章敘述瞭如何從 to do list 轉變到 done list 以提高生產力，解決任務無法完成帶來的挫折感。 將重點中心從未完成的事情轉移至已完成的事情上，提升信心和動力。也介紹了寫 done list 的步驟和技巧，及如何換種日程管理的方式。
工具功能
(1) 彈性任意查詢檔案，如對來源目錄設定，檔案修改日期 設定，檔名特定字串或副檔名設定後，自動查出明細，並可展開至各階子目錄處理
(2) 依查詢後結果，可產出 LIST ，提供查詢結果之確認，再依此對檔案作複
(3) 可對檔案作移動，複製至別處，刪除處理，使電腦可騰出硬碟空間
第四步驟 :建立自己的任務管理系統
白話一點說，任務管理系統 = To Do List
說實話，我一直以為自己的工作內容算是單純，沒有特別想過要使用To Do List，後來拆解每天的代辦事項之後，驚覺於公、於私，每天超過30項代辦事項，但是神(ㄓㄨ)腦(ㄊㄡˊ)如我，想靠著好記性去記憶所有事情
透過專案管理工具 ClickUp，一站整合專案任務、內容協作、資源管理、自動化流程，有效提升生產力！ClickUp 支援多元檢視模式，讓你自由切換甘特圖、心智圖、樹狀圖、月曆等形式，還提供可視化圖表功能，協助掌握團隊成員負荷程度及專案耗費時間。另有文件共編功能和自動化模組供直接套用，省下重複瑣碎工作
TickTick（滴答清單）是一款功能豐富的任務管理工具，可以幫助使用者有效安排時間和任務，提升個人效率。這篇文章介紹了TickTick的功能特點、使用技巧和付費會員相關事項，並以作者個人的使用體驗為例，為讀者提供了對於TickTick的全面瞭解。
也許是老生常談了，但是列出清單可以大大消除壓力，也提升效率，增加幸福感喔!
因為憑空記住這些無止境的必做之事，確實會讓人喘不過氣。花時間寫下來可以讓人徹底紓壓，避免一心多用，同時記憶很多事情。
有一本非常棒的好書 : 《一流工作者都在用的待辦清單：省時、減壓、事情做得完的神奇高效公式》列出十個步
列出一套完整的程式
程式設計有許多種方法，不過通常會先列出清單的再逐一執行，這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後，將框架設計完了以後，先列出一套完整的程式，將所有使用者都確
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
透過 No Code 自動化建立「待辦事項 AI 助理」，你只要上傳語音檔在 LINE 聊天室，AI 即自動摘要語音內容，同時新增待辦事項在 Todoist 待辦事項 APP，讓你管理任務更輕鬆！即使臨時接收口頭任務交付，或當下忙著處理別的事情，也能輕鬆建立待辦事項！
此文章敘述瞭如何從 to do list 轉變到 done list 以提高生產力，解決任務無法完成帶來的挫折感。 將重點中心從未完成的事情轉移至已完成的事情上，提升信心和動力。也介紹了寫 done list 的步驟和技巧，及如何換種日程管理的方式。
工具功能
(1) 彈性任意查詢檔案，如對來源目錄設定，檔案修改日期 設定，檔名特定字串或副檔名設定後，自動查出明細，並可展開至各階子目錄處理
(2) 依查詢後結果，可產出 LIST ，提供查詢結果之確認，再依此對檔案作複
(3) 可對檔案作移動，複製至別處，刪除處理，使電腦可騰出硬碟空間
第四步驟 :建立自己的任務管理系統
白話一點說，任務管理系統 = To Do List
說實話，我一直以為自己的工作內容算是單純，沒有特別想過要使用To Do List，後來拆解每天的代辦事項之後，驚覺於公、於私，每天超過30項代辦事項，但是神(ㄓㄨ)腦(ㄊㄡˊ)如我，想靠著好記性去記憶所有事情
透過專案管理工具 ClickUp，一站整合專案任務、內容協作、資源管理、自動化流程，有效提升生產力！ClickUp 支援多元檢視模式，讓你自由切換甘特圖、心智圖、樹狀圖、月曆等形式，還提供可視化圖表功能，協助掌握團隊成員負荷程度及專案耗費時間。另有文件共編功能和自動化模組供直接套用，省下重複瑣碎工作
TickTick（滴答清單）是一款功能豐富的任務管理工具，可以幫助使用者有效安排時間和任務，提升個人效率。這篇文章介紹了TickTick的功能特點、使用技巧和付費會員相關事項，並以作者個人的使用體驗為例，為讀者提供了對於TickTick的全面瞭解。
也許是老生常談了，但是列出清單可以大大消除壓力，也提升效率，增加幸福感喔!
因為憑空記住這些無止境的必做之事，確實會讓人喘不過氣。花時間寫下來可以讓人徹底紓壓，避免一心多用，同時記憶很多事情。
有一本非常棒的好書 : 《一流工作者都在用的待辦清單：省時、減壓、事情做得完的神奇高效公式》列出十個步
列出一套完整的程式
程式設計有許多種方法，不過通常會先列出清單的再逐一執行，這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後，將框架設計完了以後，先列出一套完整的程式，將所有使用者都確