圖例 代碼在圖片后面 點贊??+關注🙏+收藏??
頁面加載后顯示
?
?拖拽效果
?源代碼? 由于js庫使用外鏈，所以會加載一會兒
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Sortable.js Example</title>
? ? <style>
? ? ? ? .list-group {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? gap: 1em;
? ? ? ? }
?
? ? ? ? .list-group-item {
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? border: 2px solid #ff0000;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
? ? ? ? ? ? padding: 0.5em;
? ? ? ? ? ? width: 150px; /* 減少寬度 */
? ? ? ? ? ? height: 70px; /* 設置高度 */
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? text-align: center;
? ? ? ? }
?
? ? ? ? .list-group-item.dragging {
? ? ? ? ? ? opacity: 0.5;
? ? ? ? }
? ? </style>
? ? <!-- 引入 Sortable.js 的 CSS 和 JS 文件 -->
? ? <link rel="stylesheet" href="https://unpkg.com/sortablejs/Sortable.min.css">
</head>
<body>
? ? <div id="example-sortable" class="list-group">
? ? ? ? <div class="list-group-item">
? ? ? ? ? ? 項目 1
? ? ? ? </div>
? ? ? ? <div class="list-group-item">
? ? ? ? ? ? 項目 2
? ? ? ? </div>
? ? ? ? <div class="list-group-item">
? ? ? ? ? ? 項目 3
? ? ? ? </div>
? ? ? ? <div class="list-group-item">
? ? ? ? ? ? 項目 4
? ? ? ? </div>
? ? </div>
?
? ? <!-- 引入 Sortable.js 的 JS 文件 -->
? ? <script src="https://unpkg.com/sortablejs/Sortable.min.js"></script>
? ? <script>
? ? ? ? // 初始化 Sortable
? ? ? ? var el = document.getElementById('example-sortable');
? ? ? ? Sortable.create(el, {
? ? ? ? ? ? group: 'shared', // 允許與其它具有相同組名的元素交互
? ? ? ? ? ? animation: 150, // 動畫速度
? ? ? ? ? ? ghostClass: 'blue-background-class' // 拖動時元素的樣式類
? ? ? ? });
? ? </script>
</body>
</html>
