All gists matching topic drag-and-drop

timmy / SortableJS Grid 拖曳排序

0 mi piace
0 forks
1 files
Ultima volta attivo 9 months ago
本範例使用 SortableJS 實現 Grid 佈局的可拖放排序，允許用戶調整區塊順序，適用於 視覺化管理、儀表板排序、圖片排列與動態 UI 佈局 等應用。
dom-manipulation drag-and-drop grid-layout html javascript sortablejs ui-interaction
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 mi piace
0 forks
1 files
Ultima volta attivo 9 months ago
本範例展示如何使用 SortableJS 實現可拖放的巢狀清單，允許用戶調整層級結構與順序，適用於 層級式資料管理、分類管理、階層式 UI 排序 等應用。
dom-manipulation drag-and-drop html javascript nested-list sortablejs ui-interaction
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 mi piace
0 forks
1 files
Ultima volta attivo 9 months ago
本範例展示如何使用 SortableJS 在多個清單之間拖放項目，允許用戶在不同分類間移動內容，適用於 任務管理、拖放式分類、視覺化數據管理 等應用。
dom-manipulation drag-and-drop html javascript multi-list sortablejs ui-interaction
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 mi piace
0 forks
1 files
Ultima volta attivo 9 months ago
本範例展示如何使用 SortableJS 來實現可拖放排序功能，並即時顯示更新後的順序，適用於動態 UI、可視化管理、任務清單與數據重組等應用。
dom-manipulation drag-and-drop dynamic-list html javascript sortablejs ui-interaction
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 mi piace
0 forks
1 files
Ultima volta attivo 9 months ago
SortableJS 是一個輕量級 JavaScript 函式庫，可讓使用者透過拖放方式重新排序 HTML 清單項目，適用於動態 UI、可視化管理及交互式應用。
dom-manipulation drag-and-drop html javascript sortablejs ui-interaction
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;
Più nuovi Più vecchi

Creato da Opengist ⋅ Load: 114ms⋅

Italiano