feat: 拖拽布局-删除组件操作

demoHtml/flex/css/index.css

@@ -5,7 +5,7 @@ html {
     padding: 0;
     height: 100%;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f0f2f5;
+    background-color: #e5e7eb;
     color: #333;
 }
 * {
@@ -21,16 +21,23 @@ html {
 
 /* Components panel */
 #components-panel {
+    position: relative;
     flex: 1;
-    padding: 10px;
     background-color: #fff;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+}
+
+.components-list {
+    flex: 1;
+    padding: 10px;
     overflow-y: auto;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-content: flex-start;
     gap: 10px;
-    border-right: 1px solid #e0e0e0;
 }
 
 .component-item {
@@ -70,12 +77,42 @@ html {
 .component-item span {
     font-size: 14px;
 }
+.action-btn {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 10px;
+}
+.action-btn .trash-container,
+.action-btn .save-container {
+    width: 46%;
+    height: 40px;
+    margin: 0 2%;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0, 123, 255, 0.6);
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+}
+.save-container {
+    background: rgb(0, 123, 255, 1) !important;
+}
+.action-btn .trash-container > span,
+.action-btn .save-container > span {
+    margin-left: 5px;
+}
 
 /* Canvas panel */
 #canvas-panel {
     flex: 4;
     height: 100%;
-    background-color: #f9f9f9;
+    background-color: #f9fafb;
     position: relative;
     overflow-y: auto;
     padding: 10px;
@@ -84,6 +121,10 @@ html {
     cursor: pointer;
     background: #fff;
 }
+#canvas-panel .grid-stack-item-content {
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
 
 .global-save-button-container {
     position: absolute;

demoHtml/flex/index.html

@@ -26,6 +26,7 @@
         <div id="app">
             <!-- 组件列表 -->
             <div id="components-panel">
+                <div class="components-list">
                     <div class="component-item grid-stack-item">
                         <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
                     </div>
@@ -45,11 +46,25 @@
                         <div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
                     </div>
                 </div>
+                <div
+                    class="action-btn"
+                    id="trash"
+                >
+                    <div class="trash-container">
+                        <i class="fas fa-trash"></i>
+                        <span>拖动删除</span>
+                    </div>
+                    <div class="save-container">
+                        <i class="fas fa-trash"></i>
+                        <span>保存布局</span>
+                    </div>
+                </div>
+            </div>
             <!-- 画布容器 -->
             <div id="canvas-panel">
-                <div class="global-save-button-container">
+                <!-- <div class="global-save-button-container">
                     <button class="global-save-button">保存布局</button>
-                </div>
+                </div> -->
                 <div class="grid-stack"></div>
             </div>
             <!-- 当前选中组件属性 -->

demoHtml/flex/js/index.js

@@ -19,8 +19,9 @@
             minRow: 8,
             acceptWidgets: true,
             float: true,
+            removable: '#trash',
         });
-        GridStack.setupDragIn('#components-panel > .component-item', undefined, [
+        GridStack.setupDragIn('#components-panel .component-item', undefined, [
             {
                 w: 12,
                 h: 2,
@@ -70,6 +71,13 @@
                 handleAddComponent(item);
             });
         });
+
+        grid.on('removed', function (_event, itemArray) {
+            console.log(itemArray, '这里触发了移除removed事件');
+            itemArray.forEach((item) => {
+                handleRemoveComponent(item);
+            });
+        });
     };
 
     // 处理添加组件之后的操作
@@ -83,15 +91,27 @@
             }
             currentComponent = component;
             // 右侧显示组件属性列表
-            if (!$('#props-panel').find('form').hasClass('show')) {
-                $('#props-panel').find('.wait-box').addClass('hidden');
-                $('#props-panel').find('form').attr('class', 'show');
+            if (!$('#props-panel').find('form').is(':visible')) {
+                $('#props-panel').find('.wait-box').hide();
+                $('#props-panel').find('form').show();
             }
             // 将当前选中组件的属性显示在右侧列表中
             setCurrentComponentProps(currentComponent);
         });
     };
 
+    var handleRemoveComponent = (component) => {
+        if (currentComponent && currentComponent.id === component.id) {
+            currentComponent = null;
+            // 右侧显示请选择组件
+            if (!$('#props-panel').find('wait-box').is(':visible')) {
+                console.log('111');
+                $('#props-panel').find('.wait-box').show();
+                $('#props-panel').find('form').hide();
+            }
+        }
+    };
+
     //将当前选中组件的属性显示在右侧列表中
     var setCurrentComponentProps = function (component) {
         const form = $('#props-panel').find('form');
@@ -168,8 +188,8 @@
         });
     };
 
-    $('.global-save-button').click(function () {
-        grid.addWidget({ w: 2, content: 'item 1' });
+    $('.save-container').click(function () {
+        // grid.addWidget({ w: 2, content: 'item 1' });
         console.log(grid.save());
         console.log(grid);
     });