update

src/components/pages/addCourse.vue

@@ -543,7 +543,8 @@
                   width: 100%;
                   padding: 0 20px 0 20px;
                   box-sizing: border-box;
-                  background: #fff
+                  background: #fff;
+                  border-radius: 8px;
                 ">
                     <!-- :style="{ maxWidth: (userid == courseUserid || role == '1') ? 'calc(100% - 300px)' : 'calc(100% - 175px)' }" -->
                     <div class="cru_selectBox"
@@ -574,9 +575,9 @@
                       style="margin: 0 0 0 auto;">智能粘贴</button>
                   </div>
 
-                  <div style="margin: 0 0 40px 0; padding: 0 20px 0 20px"
+                  <div style="margin: 0 0 10px 0; padding: 0;"
                     v-for="(item, index) in unitJson[unitIndex].chapterInfo" :key="index">
-                    <div>
+                    <div class="chapter_box">
                       <div class="chapter_contentbox">
                         <!-- <div>第{{ unitIndex + 1 }}阶段</div> -->
                         <div class="cc_input">
@@ -697,7 +698,10 @@
                               itemTask.chapterData.length == 0
                               "><img src="../../assets/icon/new/c_none.png" alt /><span>请添加学习内容</span></div>
                             <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
-                              <div class="chapter_upload" v-for="(item1, index1) in itemTask.chapterData" :key="item1.id"
+                              <div                                 @dragstart="dragStart(item1, index1,index)"
+                                @dragover.prevent="dragOver(index1)"
+                                @dragend="dragEnd()"
+                                draggable class="chapter_upload" v-for="(item1, index1) in itemTask.chapterData" :key="item1.id"
                                 @click="
                                   getChapterData(
                                     $event,
@@ -707,6 +711,9 @@
                                     item1.type
                                   )
                                   ">
+                                <div
+                                class="chapter_upload_drag"
+                              ></div>
                                 <div class="chapter_upload_o" style="
                               position: relative;
                               display: flex;
@@ -926,7 +933,10 @@
                               itemTask.chapterData.length == 0
                               "><img src="../../assets/icon/new/c_none.png" alt /></div>
                             <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
-                              <div class="chapter_upload" v-for="(item1, index1) in itemTask.chapterData" :key="item1.id"
+                              <div @dragstart="dragStart(item1, index1,index)"
+                                  @dragover.prevent="dragOver(index1)"
+                                  @dragend="dragEnd()"
+                                  draggable class="chapter_upload" v-for="(item1, index1) in itemTask.chapterData" :key="item1.id"
                                 @click="
                                   getChapterData(
                                     $event,
@@ -936,6 +946,9 @@
                                     item1.type
                                   )
                                   ">
+                                <div
+                                  class="chapter_upload_drag"
+                                ></div>
                                 <div class="chapter_upload_t" style="width: 100%"></div>
                                 <div class="chapter_upload_o" style="
                                 position: relative;
@@ -3753,6 +3766,9 @@ export default {
       searchImageValue: "",
       ppage: 1,
       toolsData: toolsData,
+      oldIndex:0,
+      oldData:null,
+      newIndex:0,
     };
   },
   directives: {
@@ -8890,6 +8906,24 @@ export default {
         }, 0);
       }
     },
+    dragStart(val, i, j) {
+      this.taskCount = j
+      this.oldIndex = i;
+      this.oldData = val;
+    },
+    dragOver(i) {
+      this.newIndex = i;
+    },
+    dragEnd() {
+      let newItems = [...this.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.taskCount].chapterData];
+      // 删除老的节点
+      newItems.splice(this.oldIndex, 1);
+      // 在列表中目标位置增加新的节点
+      newItems.splice(this.newIndex, 0, this.oldData);
+      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.taskCount].chapterData = [...newItems];
+      this.newIndex = "";
+      this.$forceUpdate()
+    },
   },
   beforeDestroy() {
     clearTimeout(this.timer);
@@ -9342,11 +9376,18 @@ export default {
   color: #3681FC !important;
   font-weight: bold;
 }
-
+.chapter_box{
+  margin-top: 15px;
+  width: 100%;
+  padding: 10px 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
 .chapter_contentbox {
   display: flex;
   align-items: center;
-  margin-top: 15px;
+  /* margin-top: 15px; */
 }
 
 .chapter_contentbox .cc_title {
@@ -9958,10 +9999,20 @@ export default {
   min-height: 45px;
   /* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); */
   /* border-radius: 4px; */
-  overflow: hidden;
+  /* overflow: hidden; */
   box-sizing: border-box;
 }
 
+.chapter_upload_drag{
+  position: absolute;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  left: -9px;
+  background-image: url("../../assets/icon/new/icon_course_drag.png");
+  background-size: 100% 100%;
+  z-index: 10;
+}
 .chapter_upload_t {
   background-color: #fff;
   position: absolute;
@@ -10883,7 +10934,7 @@ ol {
 }
 
 .taskBorder {
-  border: 1px solid #CAD1DC;
+  /* border: 1px solid #CAD1DC; */
   border-radius: 10px;
   margin-top: 20px;
   min-height: 670px;
@@ -12374,10 +12425,11 @@ ol {
 }
 
 .rb_c_box_right>.basic_box {
-  background: #fff;
-  border-radius: 8px;
+  /* background: #fff; */
+  border-radius: 0;
   height: calc(100% - 0px);
   overflow: auto;
+  padding: 0;
 }
 
 .textarea_css {

src/components/pages/easy/addCourse.vue

@@ -10610,7 +10610,7 @@ export default {
   min-height: 45px;
   /* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); */
   /* border-radius: 4px; */
-  overflow: hidden;
+  /* overflow: hidden; */
   box-sizing: border-box;
 }
 

src/components/pages/task/addCourse.vue

@@ -341,6 +341,10 @@
                             style="display: flex; flex-direction: column"
                           >
                             <div
+                              @dragstart="dragStart(item1, index1,index)"
+                              @dragover.prevent="dragOver(index1)"
+                              @dragend="dragEnd()"
+                              draggable
                               class="chapter_upload"
                               v-for="(item1, index1) in itemTask.chapterData"
                               :key="item1.id"
@@ -354,6 +358,9 @@
                                 )
                               "
                             >
+                              <div
+                                class="chapter_upload_drag"
+                              ></div>
                               <div
                                 class="chapter_upload_t"
                                 style="width: 100%"
@@ -7146,6 +7153,9 @@ export default {
       imageList: [],
       heightPx:'100%',
       toolsData: toolsData,
+      oldIndex:0,
+      oldData:null,
+      newIndex:0,
     };
   },
   directives: {
@@ -11965,6 +11975,24 @@ export default {
         // }, 0);
       }
     },
+    dragStart(val, i, j) {
+      this.taskCount = j
+      this.oldIndex = i;
+      this.oldData = val;
+    },
+    dragOver(i) {
+      this.newIndex = i;
+    },
+    dragEnd() {
+      let newItems = [...this.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.taskCount].chapterData];
+      // 删除老的节点
+      newItems.splice(this.oldIndex, 1);
+      // 在列表中目标位置增加新的节点
+      newItems.splice(this.newIndex, 0, this.oldData);
+      this.unitJson[this.unitIndex].chapterInfo[0].taskJson[this.taskCount].chapterData = [...newItems];
+      this.newIndex = "";
+      this.$forceUpdate()
+    },
   },
   beforeDestroy() {
     clearTimeout(this.timer);
@@ -13035,10 +13063,20 @@ export default {
   min-height: 45px;
   /* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); */
   /* border-radius: 4px; */
-  overflow: hidden;
+  /* overflow: hidden; */
   box-sizing:border-box;
 }
 
+.chapter_upload_drag{
+  position: absolute;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  left: -9px;
+  background-image: url("../../../assets/icon/new/icon_course_drag.png");
+  background-size: 100% 100%;
+  z-index: 10;
+}
 .chapter_upload_t {
   background-color: #fff;
   position: absolute;