timmy / SortableJS Grid 拖曳排序
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 9 months ago
本範例使用 SortableJS 實現 Grid 佈局的可拖放排序，允許用戶調整區塊順序，適用於 視覺化管理、儀表板排序、圖片排列與動態 UI 佈局 等應用。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>SortableJS Grid 拖曳排序</title> |
| 7 | <style> |
| 8 | .grid-container { |
| 9 | display: flex; |
| 10 | flex-wrap: wrap; |
timmy / SortableJS 巢狀清單拖放排序
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 9 months ago
本範例展示如何使用 SortableJS 實現可拖放的巢狀清單，允許用戶調整層級結構與順序，適用於 層級式資料管理、分類管理、階層式 UI 排序 等應用。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>SortableJS 巢狀清單</title> |
| 7 | <style> |
| 8 | .nested-list { |
| 9 | list-style: none; |
| 10 | padding-left: 20px; |
timmy / SortableJS 多清單拖放排序
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 9 months ago
本範例展示如何使用 SortableJS 在多個清單之間拖放項目，允許用戶在不同分類間移動內容，適用於 任務管理、拖放式分類、視覺化數據管理 等應用。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>SortableJS 多清單範例</title> |
| 7 | <style> |
| 8 | .container { |
| 9 | display: flex; |
| 10 | gap: 20px; |
timmy / SortableJS 進階拖放排序
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 9 months ago
本範例展示如何使用 SortableJS 來實現可拖放排序功能，並即時顯示更新後的順序，適用於動態 UI、可視化管理、任務清單與數據重組等應用。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>SortableJS 進階範例</title> |
| 7 | <style> |
| 8 | .list { |
| 9 | list-style: none; |
| 10 | padding: 0; |
timmy / SortableJS 拖放排序
0 Kedvelések
0 forkok
1 fájlok
Utoljára aktív 9 months ago
SortableJS 是一個輕量級 JavaScript 函式庫，可讓使用者透過拖放方式重新排序 HTML 清單項目，適用於動態 UI、可視化管理及交互式應用。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>SortableJS 範例</title> |
| 6 | <style> |
| 7 | .list { |
| 8 | list-style-type: none; |
| 9 | padding: 0; |
| 10 | width: 200px; |
Újabb
Régebbi