feat: 拖拽布局

demoHtml/flex/css/index.css

@@ -35,24 +35,29 @@ html {
 
 .component-item {
     width: calc(50% - 5px);
-    display: flex;
     height: 80px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.component-item .grid-stack-item-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 20px;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    text-align: left;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    background-color: #fafafa;
 }
 
-.component-item:hover {
+#canvas-panel .grid-stack-item-content {
-    transform: translateY(-5px);
+    height: auto;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
-    border-color: #007bff;
+
+#components-panel .grid-stack-item {
+    background-color: #fff;
+    border: 1px solid #e0e0e0;
 }
 
 .component-item i {
@@ -70,9 +75,9 @@ html {
     flex: 4;
     height: 100%;
     background-color: #f9f9f9;
-    margin: 0;
     position: relative;
-    overflow-y: scroll;
+    overflow-y: auto;
+    padding: 10px;
 }
 .grid-stack-item-content {
     cursor: pointer;
@@ -83,6 +88,7 @@ html {
     position: absolute;
     top: 20px;
     right: 20px;
+    z-index: 99;
 }
 
 .global-save-button {
@@ -103,7 +109,7 @@ html {
 /* Props panel */
 #props-panel {
     flex: 1;
-    padding: 20px;
+    padding: 10px;
     background-color: #fff;
     overflow-y: auto;
     border-left: 1px solid #e0e0e0;

demoHtml/flex/index.html

@@ -26,12 +26,24 @@
         <div id="app">
             <!-- 组件列表 -->
             <div id="components-panel">
-                <div class="component-item grid-stack-item"><i class="fas fa-images"></i><span>轮播图</span></div>
+                <div class="component-item grid-stack-item">
-                <div class="component-item grid-stack-item"><i class="fas fa-search"></i><span>搜索</span></div>
+                    <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
-                <div class="component-item grid-stack-item"><i class="fas fa-tv"></i><span>热门频道</span></div>
+                </div>
-                <div class="component-item grid-stack-item"><i class="fas fa-video"></i><span>直播</span></div>
+                <div class="component-item grid-stack-item">
-                <div class="component-item grid-stack-item"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
+                    <div class="grid-stack-item-content"><i class="fas fa-search"></i><span>搜索</span></div>
-                <div class="component-item grid-stack-item"><i class="fas fa-link"></i><span>快捷入口</span></div>
+                </div>
+                <div class="component-item grid-stack-item">
+                    <div class="grid-stack-item-content"><i class="fas fa-tv"></i><span>热门频道</span></div>
+                </div>
+                <div class="component-item grid-stack-item">
+                    <div class="grid-stack-item-content"><i class="fas fa-video"></i><span>直播</span></div>
+                </div>
+                <div class="component-item grid-stack-item">
+                    <div class="grid-stack-item-content"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
+                </div>
+                <div class="component-item grid-stack-item">
+                    <div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
+                </div>
             </div>
             <!-- 画布容器 -->
             <div id="canvas-panel">

demoHtml/flex/js/index.js

@@ -8,12 +8,13 @@
             cellHeight: 80,
             // 间距
             margin: 5,
-            minRow: 5,
+            minRow: 8,
             acceptWidgets: true,
+            float: true,
         });
         GridStack.setupDragIn('#components-panel > .component-item', undefined, [
-            { w: 12, h: 2, content: '轮播图' },
+            { w: 12, h: 2 },
-            { w: 2, h: 1, content: '搜索' },
+            { w: 2, h: 1 },
         ]);
         console.log(grid, 'grid实例');
 
@@ -41,7 +42,7 @@
         // grid.load(initData);
 
         grid.engine.nodes.forEach((item) => {
-            item.el.firstChild.addEventListener('click', () => {
+            item.el.addEventListener('click', () => {
                 console.log(item);
             });
         });
@@ -49,16 +50,15 @@
         grid.on('added', function (_event, itemArray) {
             console.log(itemArray, '这里触发了添加了added事件');
             itemArray.forEach((item) => {
-                item.el.firstChild.addEventListener('click', () => {
+                item.el.addEventListener('click', () => {
                     console.log(item);
                 });
             });
         });
     };
 
-    $('.save').click(function () {
+    $('.global-save-button').click(function () {
         grid.addWidget({ w: 2, content: 'item 1' });
-        grid.engine.nodes[0].data.name += '_test';
         console.log(grid.save());
         console.log(grid);
     });