{"id":21802583,"url":"https://github.com/rayc2045/draggable-todolist","last_synced_at":"2026-05-02T05:06:14.138Z","repository":{"id":140269875,"uuid":"239700299","full_name":"rayc2045/draggable-todoList","owner":"rayc2045","description":"A productivity-focused to-do list featuring drag-and-drop reordering, autosave functionality, and markdown support for note-taking.","archived":false,"fork":false,"pushed_at":"2022-03-24T16:46:47.000Z","size":10013,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-31T05:38:44.599Z","etag":null,"topics":["drag-and-drop","interaction","interaction-design","interactive","localstorage","lottie-animation","markdown","sortablejs","todo","todo-app","todo-list","todoapp","todolist","todolist-application","todomvc","todos","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/draggable-to-do-list%EF%BD%9C%E5%8F%AF%E6%8B%96%E6%9B%B3%E7%9A%84/pndehpgkgbajinooeiebnjikfdfgoogi","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayc2045.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-11T07:18:34.000Z","updated_at":"2024-11-23T04:56:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"523183b0-461b-48c4-be1e-4e6c2a81f1b1","html_url":"https://github.com/rayc2045/draggable-todoList","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rayc2045/draggable-todoList","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fdraggable-todoList","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fdraggable-todoList/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fdraggable-todoList/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fdraggable-todoList/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayc2045","download_url":"https://codeload.github.com/rayc2045/draggable-todoList/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fdraggable-todoList/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32523444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","interaction","interaction-design","interactive","localstorage","lottie-animation","markdown","sortablejs","todo","todo-app","todo-list","todoapp","todolist","todolist-application","todomvc","todos","vanilla-javascript","vanilla-js"],"created_at":"2024-11-27T11:29:33.432Z","updated_at":"2026-05-02T05:06:14.110Z","avatar_url":"https://github.com/rayc2045.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Draggable To-Do List｜可拖曳的待辦事項清單\n\n![Photo](https://raw.githubusercontent.com/rayc2045/draggable-todoList/master/demo/draggable_todo_list.png)\n\n[\u003e Download Chrome Extension](https://chrome.google.com/webstore/detail/draggable-to-do-list%EF%BD%9C%E5%8F%AF%E6%8B%96%E6%9B%B3%E7%9A%84/pndehpgkgbajinooeiebnjikfdfgoogi)\n\n### 簡介\n一開始的版本是和 Todo MVC 類似的簡易待辦事項清單，由於本身的使用需求，不斷調整和優化 Todo 清單的外觀與功能，如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持，以及對 XSS 跨網站指令程式碼的防禦處理。最後再加上動畫和互動音效，讓你達成任務時成就感滿滿！現在就開始規劃你的一天 🙂\n\n### 外觀與互動設計\n- 設計上淡化勾選方塊顏色，並選用較密集的 [Roboto Condensed](https://fonts.google.com/specimen/Roboto+Condensed) 字體，讓視線更集中於任務\n- 加入任務拖曳與排序功能\n- 將過長或連字的段落 (例如 `THISISAPARAGRAPHWITHOUTSPACE`) 強制換行，維持待辦清單任務的一致性\n- 加入 [Markdown Link 轉譯](https://dev.to/mattkenefick/regex-convert-markdown-links-to-html-anchors-f7j) 功能，讓使用者能夠輕鬆地使用 Markdown 語法創造附帶網址連結的任務\n- 除了將勾選完成的任務以灰色字和刪除線表示，另外使用灰階對 Emoji 做去色處理\n- 針對新增任務框做優化，使其在任何操作後自動集中 (focus)，省去為了新增任務的額外點擊\n- 任務超過十項時，鎖住新增任務框的輸入：好的待辦事項在於清楚、必要和可完成性，重新檢視待辦事項清單讓我們能更適切地為一整天規劃安排\n- 加入新增、拖移、刪除互動音效、甚至是達成任務時的《薩爾達：荒野之息》經典音效；當取消勾選任務時，音效於 0.5 秒內逐步靜音，優化使用體驗\n- 加入 [LottieFiles](https://lottiefiles.com/) 的 SVG 彩蛋動畫，達成任務時成就感滿滿！\n\n### 開發紀錄\n- 使用預處理器 Sass 撰寫 CSS\n- 使用 JavaScript `class` 物件導向開發\n- 使用 HTML 屬性 `contenteditable` 達成即時編輯，並且在貼上文字時使用 [`HTML DOM execCommand()` 方法](https://www.w3schools.com/jsref/met_document_execcommand.asp) 達成純文字貼上\n- 對使用者輸入和輸出做 [過濾處理](https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/)，[避免 XSS 跨網站指令碼注入](https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/)\n- 加入 [LocalStorage](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/localStorage) 儲存功能，關掉瀏覽器也不怕任務丟失！\n- 使用 [SortableJS](https://github.com/SortableJS/Sortable) 實現任務拖曳 (drag) ，並在移動任務的同時達成任務排序和資料儲存\n- 透過設定計時器無聲播放音檔進行緩存，音效永不延遲\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fdraggable-todolist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayc2045%2Fdraggable-todolist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fdraggable-todolist/lists"}