修改

src/App.vue

@@ -173,7 +173,7 @@ export default {
 }
 </script>
 <style>
-  @import "//at.alicdn.com/t/font_635492_2ir29znz8xp.css";
+  @import "//at.alicdn.com/t/font_635492_erhq7cu6ne6.css";
   @import "./assets/css/Semibold.css";
   @import "./assets/css/global/config.css";
   @import "./assets/css/fileIcon.css";

src/components/WebSet/WebSiteEdit.vue

@@ -152,7 +152,18 @@
     font-size: 14px;
     margin-left: 20px;
   }
-
+  .ui-sortable-handle{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    flex-basis: 40px;
+    background-color: #eee;
+    cursor: move;
+  }
+  .ui-sortable-handle i{
+    font-size:25px;
+  }
 </style>
 <template>
   <div class="WebSiteEdit">
@@ -175,9 +186,14 @@
       </div>
       <div class="WebSite_right">
         <div class="WebSite_right_preview">
-          <div v-for="(item,index) in dataList" :key="index">
+          <div v-for="(item,index) in dataList" draggable="true" @dragstart="handleDragStart($event, item)"
+            @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)"
+            @dragend="handleDragEnd($event, item)" :key="index">
             <div class="diy-component-preview">
               <div class="WebSite_item">
+                <div class="ui-sortable-handle">
+                  <i class="iconfont icon-Arrowsdowntopmove"></i>
+                </div>
                 <div class="temp-img">
                   <img v-if="item.plugData&&item.plugData.CoverImg" :src="item.plugData.CoverImg" alt="" />
                 </div>
@@ -235,7 +251,8 @@
       <!-- 挑选自有行程 段落链接 -->
       <b2blinkdialog v-if="currentEditItem.Id=='b2b_LinkP'" :plugData="currentEditItemData"></b2blinkdialog>
       <!-- 挑选自有行程 图片链接 -->
-      <linkpicturedialog v-if="currentEditItem.Id=='b2b_LinkPicture'" :plugData="currentEditItemData"></linkpicturedialog>
+      <linkpicturedialog v-if="currentEditItem.Id=='b2b_LinkPicture'" :plugData="currentEditItemData">
+      </linkpicturedialog>
       <!-- 搜寻区块 banner -->
       <bannerdialog v-if="currentEditItem.Id=='search_b'" :plugData="currentEditItemData"></bannerdialog>
       <!-- 搜寻区块 轮播淡出 -->
@@ -288,6 +305,7 @@
         currentEditItemData: {},
         //当前编号的插件
         currentEditItem: {},
+        dragging: null
       };
     },
     created() {},
@@ -311,6 +329,27 @@
       otherdialog
     },
     methods: {
+      handleDragStart(e, item) {
+        this.dragging = item;
+      },
+      handleDragEnd(e, item) {
+        this.dragging = null
+      },
+      //首先把div变成可以放置的元素，即重写dragenter/dragover
+      handleDragOver(e) {
+        e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      },
+      handleDragEnter(e, item) {
+        e.dataTransfer.effectAllowed = "move" //为需要移动的元素设置dragstart事件
+        if (item === this.dragging) {
+          return
+        }
+        const newItems = [...this.dataList]
+        const src = newItems.indexOf(this.dragging)
+        const dst = newItems.indexOf(item)
+        newItems.splice(dst, 0, ...newItems.splice(src, 1))
+        this.dataList = newItems
+      },
       //显示弹窗
       showDialog(item) {
         this.isShowDialog = true;