今天來介紹網頁前端拖曳套件，身為一個前端工程師，百思不得其解如何讓使用者任意的移動我們寫死的HTML，該怎麼做到從這邊跑到另一邊三仙歸洞? SortableJS 這個JS拖曳套件讓我們任意排序元素，使用拖拉的方式讓網站更有互動性，一起來試試看這方便的魔法套件吧!!
分類: 前端教學
網頁前端行事曆，今天要來講解如何使用 FullCalendar 行事曆套件，官方提供許多的Demo範例，但卻霧煞煞不知道哪個功能要去哪個地方設定？我在剛出社會也遇到這個問題，不如自己寫一個FullCalendar教學，實作一些較常用的幾個功能給大家，配合SweetAlert2來顯示內容讓大家參考，更快地進入狀況。
網頁前端圖片輪播，讓我們來輕鬆實現多種吸引人的圖片輪播效果，我個人超推Swiperjs套件來呈現圖片、文字或公告，裏面提供超多輪播方式給我們選擇，包括幻燈片的垂直和水平方向、3D旋轉、卡片式輪播、漸進式…等，這些效果直接提升網站的設計感，下面主要展示我個人認為好用，同時用在公司形象網站中的幾種輪播，讓我們馬上來玩玩看。
網頁前端彈跳視窗，在使用網頁時，某些情況像是表單送出、資料確認，都需要有彈出警示或是重複確認，若彈窗夠清楚並附帶動畫效果，更能讓使用者專注於操作上，對於使用者體驗還能有加分，SweetAlert2這個彈窗套件，不僅有美觀的設計還附帶動畫，並且提供各種客製化的功能，讓網頁呈現更多元的方式來滿足需求，下面就讓我們來看看他有多強大且好用吧
網頁前端表格套件，雖然在HTML裡已經有Table標籤可以使用，但如果能在表格中加入功能對於使用者的操作會更加分，Grid.js幫你製作一個Table，包含了頁籤換頁、資料排序、資料搜尋、資料讀取中…等方便的方法可以使用，讓我們更容易的查詢與顯示資料，一起來看看怎麼使用吧。
網頁前端日期時間選擇，可以直接使用HTML原生的input type=”date”，但對於使用者體驗會較不佳，外觀也較簡單，今天我們使用Air Datepicker，輕量的套件(~13KB)，有精簡的外觀，搭配動畫展開日曆，客製化日期顯示，並且提供手機版RWD樣式，專案內有日期選擇的需求，非常建議使用Air Datepicker。
使用網頁前端動畫AOS套件讓自己的網站更有現代感，快速開發的情況下，就直接使用別人寫好的工具，不用自己寫 CSS3 animation、transition，直接給你漸進、翻轉、滑動、縮放效果，還能延遲顯示與更改動畫時間，覺得好用就加入到自己的專案內吧!
使用網頁動態圖表顯示資料統計，我們的教學使用最容易上手的Chart.js輕鬆製作圖表，還能有RWD的效果，只需要一個HTML DOM及Chart.js的程式碼連結，就能依照需求完成各式圖表，如長條圖、圓餅圖、折線圖…各種，外觀加上動畫直接幫你包辦做好，讓我們一起來玩玩簡單的Chart.js製作圖表吧!