元素拖动实现

package-lock.json

@@ -16,6 +16,7 @@
         "vue": "^2.6.14",
         "vue-clickaway": "^2.2.2",
         "vue-router": "^3.5.1",
+        "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -10311,6 +10312,12 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -11259,6 +11266,15 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "vue": "^2.6.14",
     "vue-clickaway": "^2.2.2",
     "vue-router": "^3.5.1",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/components/paymentMethod.vue

@@ -1,32 +1,33 @@
 <template>
     <div class="payment-wrap">
-
+        <draggable v-model="list" @start="drag=true" @end="onEnd" :move="checkMove" handle=".drag-handle" >
-        <div class="payment-item" v-for="item in paymentList" :key="item.name">
+            <div class="payment-item" v-for="item in list" :key="item.name">
-            <dl>
+                <dl>
-                <dt>
+                    <dt class="drag-handle">
-                    <img v-if="item.type == '1'" src="@/assets/register/weixin_pay.png" alt="">
+                        <img :src="item.img" alt="">
-                    <img v-if="item.type == '2'" src="@/assets/register/zhifubao_pay.png" alt="">
+                    </dt>
-                    <img v-if="item.type == '3'" src="@/assets/register/taobao_pay.png" alt="">
+                    <dd>
-                    <img v-if="item.type == '4'" src="@/assets/register/jingdong_pay.png" alt="">
+                        <p>{{ item.name }}</p>
-                </dt>
+                        <p>{{ item.num }}</p>
-                <dd>
+                    </dd>
-                    <p>{{ item.name }}</p>
+                </dl>
-                    <p>{{ item.num }}</p>
+                <el-form>
-                </dd>
+                    <GuipSwitch :modelValue="item.flag" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
-            </dl>
+                    </GuipSwitch>
-            <GuipSwitch :modelValue="item.flag" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
+                </el-form>
-            </GuipSwitch>
+            </div>
-        </div>
+        </draggable>
     </div>
 </template>
 <script>
 import GuipSwitch from '@/components/GuipSwitch.vue';
-
+import draggable from 'vuedraggable';
 export default {
   name: '',
   props:['paymentList'],
   components: {
-    GuipSwitch
+    GuipSwitch,
+    draggable
   },
   data(){
     return {
@@ -35,13 +36,48 @@ export default {
             '2':'zhifubao_pay.png',
             '3':'taobao_pay.png',
             '4':'jingdong_pay.png',
-        }
+        },
+        list:[],
+        drag: false,
     }
   },
+  watch:{
+    paymentList: {
+        immediate: true,
+        handler(newVal) {
+            this.list = newVal;
+        },
+    },
+  },
   methods:{
     onSwitchChange(data){
+        // 开关逻辑
         console.log(data,'---');
+    },
+    onEnd() {
+        this.drag = false;
+        // list 为排序后的新数据 如果需要修改props 的 paymentList 需要$emit或者其他方法更新
+        console.log('Drag and drop ended', this.list); // 可以处理拖拽结束后的逻辑，例如更新数据等。
+    },
+    checkMove(evt) {
+      // 获取将要移动到的位置索引
+      const targetIndex = this.list.length - 1; // 最后一项的索引是列表长度减1
+      // 如果当前拖拽项即将移动到最后一项，则不允许移动
+    //   console.log(evt.relatedContext.index === evt.draggedContext.index,targetIndex === evt.draggedContext.index,'0000targetIndex00');
+      if ((evt.relatedContext.index === targetIndex) || (targetIndex === evt.draggedContext.index)) {
+        return false; // 不允许移动到最后一项
+      }
+      return true; // 其他情况允许移动
     }
+    // onStart(event) {
+    //     console.log(event,'event====');
+    //   // 获取当前拖动的元素索引
+    //   const index = this.list.findIndex(item => item.id === event.draggedContext.element.id);
+    //   // 如果不是最后一项，则允许拖拽；否则阻止拖拽（通过调用 event.cancel()）
+    //   if (index === this.list.length - 1) {
+    //     event.cancel(); // 阻止拖拽开始
+    //   }
+    // }
   }
 }
 </script>
@@ -77,5 +113,8 @@ export default {
             color: #1E2226;
         }
     }
+    .drag-handle {
+        cursor: move;  /* 鼠标悬停时显示可拖拽光标 */
+    }
 }
 </style>

src/views/Register.vue

@@ -479,7 +479,7 @@
       </div>
     </div>
     <!-- 设置域名弹出框 -->
-    <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
+    <GuipDialog :dialogVisible="true" :title="dialogTitle" :show-close-button="false"
       :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
       @dialogVisibleChange="dialogVisibleChange">
       <PaymentMethod :paymentList="paymentList" />
@@ -535,7 +535,6 @@
       </div>
     </el-dialog>
 
-    <Footer></Footer>
     <div class="register-btns">
       <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpCurStep">跳过</GuipButton>
       <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="finishCurStep">完成</GuipButton>
@@ -543,7 +542,6 @@
   </div>
 </template>
 <script>
-import Footer from '@/components/Footer.vue';
 import GuipButton from '@/components/GuipButton.vue';
 import GuipFormItem from '@/components/GuipFormItem.vue';
 import GuipInput from '@/components/GuipInput.vue';
@@ -567,7 +565,6 @@ export default {
     GuipRadio,
     GuipSelect,
     SvgIcon,
-    Footer,
     GuipSwitch,
     GuipDialog,
     PaymentMethod,
@@ -772,24 +769,28 @@ export default {
           type: '1',
           name: '小知攻城狮',
           num: '1520574481 （wx1bda8b3d08d169cb）',
-          flag: true
+          flag: true,
+          img:require('@/assets/register/weixin_pay.png')
         },
         {
           type: '2',
           name: '自收款',
           num: 'wangyong@kuailebanshou.com',
+          img:require('@/assets/register/zhifubao_pay.png'),
           flag: true
         },
         {
           type: '3',
           name: '店铺收款',
           num: '轻歌曼舞82',
+          img:require('@/assets/register/taobao_pay.png'),
           flag: false
         },
         {
           type: '4',
-          name: '京东收款',
+          name: '平台检测卡',
           num: 'celunwen',
+          img:require('@/assets/register/jingdong_pay.png'),
           flag: false
         },
       ],