# 做事不能拖拖拉拉，但網頁可以：draggable.js 介紹 ###### tags: `大神來六角` --- 邱繼緯 20221117 ## 主持人 六角學院 Ray ## 近期活動 - [TheF2E](https://2022.thef2e.com/) ## 講者 邱繼緯 ![](https://i.imgur.com/cIHDIhR.png) - blog - github：https://ayugioh2003.github.io/ ## 課程推薦/相關課程 or 著作 - ithelp（iT 邦幫忙鐵人賽） - [試著把切版專案升級到 gulp4.0 吧](https://ithelp.ithome.com.tw/users/20104132/ironman/2921) - plugin - [Notion table auto-number](https://github.com/ayugioh2003/notion-table-auto-number) - 客製化網站的 CSS 樣式 讓 notion database 的 table 的 row 可以有遞增數字 ## 大綱 - 1 Drag and Drop 是什麼 - 2 Web 上的 DND - 3 Draggable.js 介紹 - 3.1 Draggable - 3.2 Droppable - 3.3 Plugins - 3.4 Sortable - 3.5 Swappable - 4 用 Draggable.js 做個簡易看板工具 - 5 官方範例 - 6 小結 ## 講義 - [Sli.do 問答區](https://app.sli.do/event/5UDzrDN7qEYUxuzSv2kFLD) - [講義 F2E 2022 ](https://lilac-quail-103.notion.site/F2E-2022-draggable-js-3e363b729ef348b3bc0369115516e769) - [video](https://youtu.be/aTJzQVKout4)