diff --git a/frontend/src/business/components/api/automation/scenario/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
index e1efdda542..7bac52dada 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
@@ -4,6 +4,7 @@
     @copy="copyRow"
     @remove="remove"
     :data="request"
+    :draggable="true"
     :color="displayColor.color"
     :background-color="displayColor.backgroundColor"
     :title="displayTitle">
@@ -48,7 +49,7 @@
     <ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>
 
     <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
-    <ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>
+    <ms-request-result-tail draggable :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>
 
     <!-- 保存操作 -->
     <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">
@@ -71,7 +72,6 @@
   import MsRun from "../../definition/components/Run";
   import {getUUID} from "@/common/js/utils";
   import ApiBaseComponent from "./common/ApiBaseComponent";
-
   export default {
     name: "MsApiComponent",
     props: {
@@ -227,7 +227,6 @@
         this.loading = true;
         this.runData = [];
         this.request.useEnvironment = this.currentEnvironmentId;
-
         let debugData = {
           id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
           variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare,
@@ -236,7 +235,6 @@
         this.runData.push(debugData);
         /*触发执行操作*/
         this.reportId = getUUID().substring(0, 8);
-
       },
       runRefresh(data) {
         this.request.requestResult = data;
@@ -253,17 +251,14 @@
 </script>
 
 <style scoped>
-
   .ms-api-col-ot-import-button {
     background-color: #EEF5FE;
     margin-right: 20px;
     color: #409EFF;
   }
-
   /deep/ .el-card__body {
     padding: 15px;
   }
-
   .tip {
     padding: 3px 5px;
     font-size: 16px;
@@ -271,15 +266,12 @@
     border-left: 4px solid #783887;
     margin: 20px 0;
   }
-
   .name-input {
     width: 30%;
   }
-
   .el-icon-arrow-right {
     margin-right: 5px;
   }
-
   .icon.is-active {
     transform: rotate(90deg);
   }
diff --git a/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue b/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
index 9e4f542f24..b37e5f86e4 100644
--- a/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
+++ b/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
@@ -3,6 +3,7 @@
     @copy="copyRow"
     @remove="remove"
     :data="timer"
+    :draggable="true"
     :show-collapse="false"
     color="#67C23A"
     background-color="#F2F9EE"
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 1cc60bb794..505a8ee26d 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -161,9 +161,9 @@
                       <!--后置脚本-->
                       <ms-jsr233-processor v-if="data.type==='JSR223PostProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.post_script')" :jsr223-processor="data" :node="node"/>
                       <!--断言规则-->
-                      <ms-api-assertions @suggestClick="suggestClick(node)" :response="response" v-if="data.type==='Assertions'" @remove="remove" @copyRow="copyRow" :assertions="data" :node="node"/>
+                      <ms-api-assertions :draggable="true" @suggestClick="suggestClick(node)" :response="response" v-if="data.type==='Assertions'" @remove="remove" @copyRow="copyRow" :assertions="data" :node="node"/>
                       <!--提取规则-->
-                      <ms-api-extract @suggestClick="suggestClick(node)" :response="response" @remove="remove" @copyRow="copyRow" v-if="data.type==='Extract'" :extract="data" :node="node"/>
+                      <ms-api-extract :draggable="true" @suggestClick="suggestClick(node)" :response="response" @remove="remove" @copyRow="copyRow" v-if="data.type==='Extract'" :extract="data" :node="node"/>
                       <!--API 导入 -->
                       <ms-api-component :request="data" :currentScenario="currentScenario" :currentEnvironmentId="currentEnvironmentId" @remove="remove" @copyRow="copyRow"
                                         v-if="data.type==='HTTPSamplerProxy'||data.type==='DubboSampler'||data.type==='JDBCSampler'||data.type==='TCPSampler'" :node="node"/>
@@ -533,7 +533,7 @@
       suggestClick(node) {
         this.response = {};
         if (node.parent && node.parent.data.requestResult) {
-         this.response = node.parent.data.requestResult;
+          this.response = node.parent.data.requestResult;
         }
       },
       showAll() {
@@ -721,8 +721,7 @@
       },
       environmentConfigClose() {
         this.getEnvironments();
-      }
-      ,
+      },
       allowDrop(draggingNode, dropNode, dropType) {
         if (dropType != "inner") {
           return true;
@@ -734,8 +733,10 @@
         return false;
       },
       allowDrag(draggingNode, dropNode, dropType) {
-        this.sort();
-        this.reload();
+        if (dropNode && draggingNode && dropType) {
+          this.sort();
+          this.reload();
+        }
       },
       nodeExpand(data) {
         if (data.resourceId) {
@@ -1025,6 +1026,7 @@
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
     font-size: 13px;
   }
+
   .ms-opt-btn {
     position: fixed;
     right: 50px;
diff --git a/frontend/src/business/components/api/automation/scenario/IfController.vue b/frontend/src/business/components/api/automation/scenario/IfController.vue
index d7337e9bb3..bf1b2419e3 100644
--- a/frontend/src/business/components/api/automation/scenario/IfController.vue
+++ b/frontend/src/business/components/api/automation/scenario/IfController.vue
@@ -4,20 +4,21 @@
     @remove="remove"
     :data="controller"
     :show-collapse="false"
+    :draggable="true"
     color="#E6A23C"
     background-color="#FCF6EE"
     :title="$t('api_test.automation.if_controller')">
 
     <template v-slot:headerLeft>
 
-      <el-input size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
+      <el-input draggable size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
 
       <el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
                  @change="change" style="width: 10%;margin-left: 10px">
         <el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
       </el-select>
 
-      <el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
+      <el-input draggable size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
     </template>
 
   </api-base-component>
diff --git a/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue b/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
index 30b6092299..d239c70cfe 100644
--- a/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
+++ b/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
@@ -3,6 +3,7 @@
     @copy="copyRow"
     @remove="remove"
     :data="jsr223ProcessorData"
+    :draggable="true"
     color="#B8741A"
     background-color="#F9F1EA"
     :title="title">
@@ -38,8 +39,6 @@
   import MsInstructionsIcon from "../../../common/components/MsInstructionsIcon";
   import MsDropdown from "../../../common/components/MsDropdown";
   import ApiBaseComponent from "./common/ApiBaseComponent";
-
-
   export default {
     name: "MsJsr233Processor",
     components: {ApiBaseComponent, MsDropdown, MsInstructionsIcon, MsCodeEdit},
@@ -145,39 +144,30 @@
 </script>
 
 <style scoped>
-
   .ace_editor {
     border-radius: 5px;
   }
-
   .script-content {
     height: calc(100vh - 570px);
   }
-
   .script-index {
     padding: 0 20px;
   }
-
   .template-title {
     margin-bottom: 5px;
     font-weight: bold;
     font-size: 15px;
   }
-
   .document-url {
     margin-top: 10px;
   }
-
   .instructions-icon {
     margin-left: 5px;
   }
-
   .ms-dropdown {
     margin-bottom: 20px;
   }
-
   /deep/ .el-divider {
     margin-bottom: 10px;
   }
-
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/LoopController.vue b/frontend/src/business/components/api/automation/scenario/LoopController.vue
index b01724f5dd..08a84e1fda 100644
--- a/frontend/src/business/components/api/automation/scenario/LoopController.vue
+++ b/frontend/src/business/components/api/automation/scenario/LoopController.vue
@@ -4,6 +4,7 @@
     @copy="copyRow"
     @remove="remove"
     :data="controller"
+    :draggable="true"
     color="#015478"
     background-color="#E6EEF2"
     :title="$t('api_test.automation.loop_controller')">
@@ -15,7 +16,7 @@
     </template>
 
 
-    <div v-if="controller.loopType==='LOOP_COUNT'">
+    <div v-if="controller.loopType==='LOOP_COUNT'" draggable>
       <el-row>
         <el-col :span="8">
           <span class="ms-span ms-radio">{{$t('loop.loops')}}</span>
@@ -34,7 +35,7 @@
       </el-row>
     </div>
 
-    <div v-else-if="controller.loopType==='FOREACH'">
+    <div v-else-if="controller.loopType==='FOREACH'" draggable>
       <el-row>
         <el-col :span="8">
           <el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.inputVal" size="small"/>
@@ -52,7 +53,7 @@
         </el-col>
       </el-row>
     </div>
-    <div v-else>
+    <div v-else draggable>
       <el-input size="small" v-model="controller.whileController.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
 
       <el-select v-model="controller.whileController.operator" :placeholder="$t('commons.please_select')" size="small"
@@ -153,11 +154,9 @@
 </script>
 
 <style scoped>
-
   .ms-span {
     margin: 10px;
   }
-
   .ms-radio {
     color: #606266;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
index c3b916e12a..7a79cf3585 100644
--- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -11,7 +11,7 @@
         <slot name="headerLeft">
           <i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"
              @click="active(data)"/>
-          <el-input v-if="!data.name || isShowInput" size="small" v-model="data.name" class="name-input"
+          <el-input :draggable="draggable" v-if="!data.name || isShowInput" size="small" v-model="data.name" class="name-input"
                     @blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
           <span v-else>
             {{data.name}}
@@ -29,7 +29,7 @@
     </div>
 
     <el-collapse-transition>
-      <div v-if="data.active && showCollapse">
+      <div v-if="data.active && showCollapse" draggable>
         <el-divider></el-divider>
        <slot></slot>
       </div>
@@ -46,6 +46,7 @@
         }
       },
       props: {
+        draggable: Boolean,
         data: {
           type: Object,
           default() {
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
index 107a7cdb67..cbc44437fb 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
@@ -5,11 +5,12 @@
     @remove="remove"
     @active="active"
     :data="assertions"
+    :draggable="draggable"
     color="#A30014"
     background-color="#F7E6E9"
     :title="$t('api_test.definition.request.assertions_rule')">
 
-    <div class="assertion-add">
+    <div class="assertion-add" :draggable="draggable">
       <el-row :gutter="10">
         <el-col :span="4">
           <el-select :disabled="isReadOnly" class="assertion-item" v-model="type"
@@ -67,7 +68,6 @@
 
   export default {
     name: "MsApiAssertions",
-
     components: {
       ApiBaseComponent,
       MsApiJsonpathSuggest,
@@ -78,8 +78,11 @@
       MsApiAssertionJsonPath,
       MsApiAssertionsEdit, MsApiAssertionDuration, MsApiAssertionRegex, MsApiAssertionText
     },
-
     props: {
+      draggable: {
+        type: Boolean,
+        default: false,
+      },
       assertions: {},
       node: {},
       request: {},
@@ -94,7 +97,6 @@
         default: false
       }
     },
-
     data() {
       return {
         options: ASSERTION_TYPE,
@@ -104,7 +106,6 @@
         reloadData: "",
       }
     },
-
     methods: {
       after() {
         this.type = "";
@@ -148,7 +149,6 @@
         this.assertions.jsonPath = [];
       }
     }
-
   }
 </script>
 
@@ -171,5 +171,4 @@
   /deep/ .el-card__body {
     padding: 15px;
   }
-
 </style>
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
index dd63acb6a0..e2d383b5bb 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
     <el-row>
-      <el-col :span="6">
+      <el-col :span="4">
         <div class="el-step__icon is-text ms-api-col">
           <div class="el-step__icon-inner">{{ index + 1 }}</div>
         </div>
@@ -11,30 +11,29 @@
           <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
         </el-select>
       </el-col>
-      <el-col :span="10">
+      <el-col :span="12">
         <i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}"
            @click="active(apiCase)"/>
         <el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
                   class="ms-api-header-select" style="width: 180px"
                   @blur="saveTestCase(apiCase)" placeholder="请输入用例名称"/>
         <span v-else>
-                  {{ apiCase.id ? apiCase.name : '' }}
-                  <i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
+          {{ apiCase.id ? apiCase.name : '' }}
+          <i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
         </span>
 
-
         <label class="ms-api-label" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
         <ms-input-tag :currentScenario="apiCase" ref="tag" style="float: right;margin-right: 215px;margin-top: -3px;" @keyup.enter.native="saveTestCase(apiCase)"/>
 
         <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
-                  <span>
-                    {{ apiCase.createTime | timestampFormatDate }}
-                    {{ apiCase.createUser }} {{ $t('api_test.definition.request.create_info') }}
-                  </span>
           <span>
-                    {{ apiCase.updateTime | timestampFormatDate }}
-                    {{ apiCase.updateUser }} {{ $t('api_test.definition.request.update_info') }}
-                  </span>
+            {{ apiCase.createTime | timestampFormatDate }}
+            {{ apiCase.createUser }} {{ $t('api_test.definition.request.create_info') }}
+          </span>
+          <span>
+            {{ apiCase.updateTime | timestampFormatDate }}
+            {{ apiCase.updateUser }} {{ $t('api_test.definition.request.update_info') }}
+          </span>
         </div>
       </el-col>
 
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
index 3d18694bff..5e9affcd1d 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseList.vue
@@ -121,7 +121,7 @@
         // testCaseId 不为空则为用例编辑页面
         this.testCaseId = testCaseId;
         this.condition = {components: API_CASE_CONFIGS};
-        this.getApiTest();
+        this.getApiTest(true);
         this.visible = true;
       },
       setEnvironment(environment) {
@@ -145,7 +145,7 @@
         this.visible = false;
       },
 
-      runRefresh(data) {
+      runRefresh() {
         this.batchLoading = false;
         this.singleLoading = false;
         this.singleRunId = "";
@@ -154,12 +154,12 @@
         this.$emit('refresh');
       },
 
-      refresh(data) {
+      refresh() {
         this.getApiTest();
         this.$emit('refresh');
       },
 
-      getApiTest() {
+      getApiTest(addCase) {
         if (this.api) {
           this.condition.projectId = this.projectId;
           if (this.isCaseEdit) {
@@ -176,9 +176,9 @@
               }
             }
             this.apiCaseList = response.data;
-            // if (this.apiCaseList.length == 0 && !this.loaded) {
-            //   this.addCase();
-            // }
+            if (addCase && this.apiCaseList.length == 0 && !this.loaded) {
+              this.addCase();
+            }
             this.apiCaseList.forEach(apiCase => {
               if (apiCase.tags && apiCase.tags.length > 0) {
                 apiCase.tags = JSON.parse(apiCase.tags);
diff --git a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
index c14bbe1bcc..3968774ef6 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
@@ -46,10 +46,8 @@
   import MsApiJsonpathSuggest from "../assertion/ApiJsonpathSuggest";
   import {ExtractJSONPath} from "../../../test/model/ScenarioModel";
   import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
-
   export default {
     name: "MsApiExtract",
-
     components: {
       ApiBaseComponent,
       MsApiJsonpathSuggest,
@@ -57,7 +55,6 @@
       MsApiExtractCommon,
       MsApiExtractEdit,
     },
-
     props: {
       extract: {},
       response: {},
@@ -71,7 +68,6 @@
         default: false
       }
     },
-
     data() {
       return {
         options: EXTRACT_TYPE,
@@ -80,7 +76,6 @@
         loading: false,
       }
     },
-
     methods: {
       after() {
         this.type = "";
@@ -144,18 +139,15 @@
     font-size: 13px;
     margin-bottom: 10px;
   }
-
   .extract-item {
     width: 100%;
   }
-
   .extract-add {
     padding: 10px;
     border: #DCDFE6 solid 1px;
     margin: 5px 0;
     border-radius: 5px;
   }
-
   /deep/ .el-card__body {
     padding: 15px;
   }
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index 3d96d7c61b..010ad7a5f0 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit 3d96d7c61bc50f32f18311d23f447663e02d7d44
+Subproject commit 010ad7a5f072a5e9d368c756a2473bbd20781433