Signed-off-by: a123456 <1209165801@qq.com>

src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl

@@ -10,12 +10,12 @@
       <el-container>
          <el-aside class="ms-editor-type-layout">
             <div class="ms-header-title">自定义表单项</div>
-            <ul id="ms-type-list">
+            <div id="ms-type-list" class="ms-type-list">
                <li v-for="type in typeList" :data-id="type.id" :data-title="type.title">
                   <i class="iconfont" :class="type.icon"></i>
                   <span v-text="type.title"></span>
                </li>
-            </ul>
+            </div>
          </el-aside>
          <el-main class="ms-editor-body-layout">
             <el-form id="ms-input-list" size="mini" class="form">
@@ -209,6 +209,7 @@
                      </el-input>
                   </el-form-item>
                </el-form>
+
                <div class="footer">
                   <el-button size="mini" type="primary">保存</el-button>
                </div>

src/main/webapp/WEB-INF/manager/mdiy/diy-model/index.ftl

@@ -88,8 +88,7 @@
                         //拖动成功后删除拖动过来的元素
                         event.item.parentNode.removeChild(event.item);
                         //想素组添加拖动过来的选项选项
-                        modelFormVue.selectedList.push(that.addInputType);
+                        modelFormVue.selectedList.splice(event.newIndex, 0, that.addInputType);
-                        //modelFormVue.selectedList.splice(0, 0, that.addInputType);
                      },
                   });
                })

src/main/webapp/static/mdiy/css/model-form.css

@@ -148,8 +148,8 @@ textarea::-webkit-input-placeholder {
   color: transparent !important;
 }
 .ms-mdiy-model-form {
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  height: 100vh;
 }
 .ms-mdiy-model-form .el-container {
   height: 100%;
@@ -169,14 +169,14 @@ textarea::-webkit-input-placeholder {
   padding: 20px;
   border-right: 1px solid #e6e6e6;
 }
-.ms-mdiy-model-form .ms-editor-type-layout ul {
+.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list {
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
-.ms-mdiy-model-form .ms-editor-type-layout ul li {
+.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list li {
   width: calc(50% - 5px);
   margin: 0 0 5px 0;
   padding: 5px;
@@ -185,7 +185,7 @@ textarea::-webkit-input-placeholder {
   border: 1px solid #e6e6e6;
   cursor: pointer;
 }
-.ms-mdiy-model-form .ms-editor-type-layout ul li i {
+.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list li i {
   font-weight: initial;
   font-size: 1em;
   color: #999;
@@ -220,6 +220,9 @@ textarea::-webkit-input-placeholder {
 .ms-mdiy-model-form .ms-editor-body-layout .active .del-but {
   visibility: visible !important;
 }
+.ms-mdiy-model-form .ms-editor-body-layout .sortable-ghost {
+  margin-bottom: 18px;
+}
 .ms-mdiy-model-form .ms-editor-attr-layout {
   background: #fff;
   min-width: 20%;

src/main/webapp/static/mdiy/less/model-form.less

@@ -1,7 +1,7 @@
 @import "../../ms-admin/4.7.0/less/app.less";
 //表单页
 .ms-mdiy-model-form {
-    .ms-width-height(100%);
+    .ms-width-height(100vw, 100vh);
     .el-container {
         height: 100%;
     }
@@ -22,7 +22,7 @@
         min-width: 15%;
         padding: 20px;
         border-right: 1px solid @borderColor;
-        ul {
+        .ms-type-list {
             .ms-margin-padding(0);
             .ms-flex();
             flex-wrap: wrap;
@@ -64,12 +64,17 @@
                 line-height: inherit;
             }
         }
+        //选中的表单元素
         .active {
             border-color: @themeColor;
             .del-but {
                 visibility: visible !important;
             }
         }
+        //表单颜色默认下边距
+        .sortable-ghost {
+            margin-bottom: 18px;
+        }
     }
     //右侧选项属性
     .ms-editor-attr-layout {