Sat Dec 9 22:08:00 CST 2023 inscode

src/assets/main.css

 /* @import "./base.css"; */
 
 html {
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
 }
+
+body {
+  background-image: linear-gradient(to bottom,
+      rgba(0, 0, 0, 0.6),
+      rgba(0, 0, 0, 0.8)), url("./img/previewFix.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  color: #fff;
+}
+.ant-radio-wrapper{
+  color:#fff;
+}
\ No newline at end of file

src/components/drag/Drag.vue

 <template>
     <div class="container-drag">
-        <a-tag color="orange" class="random-button" @click="randomDragOrder">随机顺序</a-tag>
+        <div style="width: 100%;text-align:center;margin: 10px;">
+            <a-button type="primary" class="random-button" @click="randomDragOrder">随机顺序</a-button>
+        </div>
         <div class="container-drag-box">
             <div class="container-drag-left">
-                <div v-for="item in state.dragConfig.sourceArray" :key="item.id" class="drag-item-box">
-                    <div class="drag-item" draggable="true" :id="state.dragConfig.dragDomPrefix+'-'+item.id">
-                        <img :src="item.src" width="280" height="280" />
+                <!-- <> -->
+                <div v-for="item in state.dragConfig.sourceArray" :key="item.id" class="drag-item-box"
+                    :id="state.dragConfig.sourceDomPrefix + '-' + item.id">
+                    <div class="drag-item" draggable="true" :id="state.dragConfig.dragDomPrefix + '-' + item.id">
+                        <!-- 拖拽对象 data-order 校验排序用 -->
+                        <img :src="item.src" width="280" height="280" :data-order="item.id" />
                     </div>
                 </div>
             </div>
 
-            <div class="container-drag-right">
-                <!-- 目标对象 -->
-                <div v-for="item in state.dragConfig.sourceArray" :key="item" class="target-item-box dropzone" :id="state.dragConfig.targetDomPrefix+'-'+item.id">
+            <div class="container-drag-right" id="target-box-id">
+                <!-- 目标对象 data-order 校验排序用-->
+                <div v-for="item in state.dragConfig.sourceArray" :key="item" class="target-item-box dropzone"
+                    :id="state.dragConfig.targetDomPrefix + '-' + item.id" :data-order="item.id">
 
                 </div>
             </div>
         </div>
+        <div style="width: 100%;text-align:center">
+            <a-button type="primary" @click="confirmImg">
+                确定
+            </a-button>
+        </div>
     </div>
 </template>
 
 <script setup>
 import { reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
 const state = reactive({
     dragConfig: {
-        targetDomPrefix:'target-item',
-        dragDomPrefix:'drag-item',
+        sourceDomPrefix: 'source-item',
+        targetDomPrefix: 'target-item',
+        dragDomPrefix: 'drag-item',
         dragTarget: null,
         sourceImg: '/img/imageSource.png',
         sourceArray: [{
@@ -47,7 +60,7 @@ const state = reactive({
         ]
     }
 })
-// 随机顺序
+// 数组随机顺序
 const randomDragOrder = () => {
     const sourceArray = [...state.dragConfig.sourceArray]
     sourceArray.sort(() => Math.random() - 0.5);
@@ -56,7 +69,7 @@ const randomDragOrder = () => {
 
 // 拖拽对象
 const drag = (event) => {
-    console.log("dragging",event);
+    console.log("dragging", event);
 }
 
 const dragStart = (event) => {
@@ -106,8 +119,8 @@ const drop = (event) => {
 }
 
 const initDragAction = (sourceElement) => {
-    if(!sourceElement){
-        return 
+    if (!sourceElement) {
+        return
     }
     /* 在放置拖拽对象上触发的事件 */
     sourceElement.addEventListener("drag", drag);
@@ -118,8 +131,8 @@ const initDragAction = (sourceElement) => {
 }
 
 const initTargetAction = (targetElement) => {
-    if(!targetElement){
-        return 
+    if (!targetElement) {
+        return
     }
     /* 在放置目标对象上触发的事件 */
 
@@ -136,18 +149,64 @@ const initTargetAction = (targetElement) => {
     targetElement.addEventListener("drop", drop);
 }
 
+// 校验
+const confirmImg = () => {
+    const rightDom = document.getElementById('target-box-id')
+    console.log('rightDom', rightDom)
+    const rightDomChildNodes = rightDom.childNodes
+    console.log('rightDomChildNodes', rightDomChildNodes)
+    if (rightDomChildNodes.length) {
+        // childNodes会出现空文本节点
+        for (let i = 0, length = rightDomChildNodes.length; i < length; ++i) {
+            console.log('childNodes', rightDomChildNodes[i])
+            if (rightDomChildNodes[i].nodeType !== 1) {
+                // 跳过文本节点
+                continue
+            }
+            else if (rightDomChildNodes[i].hasChildNodes) {
+                console.log('childNodes attr', rightDomChildNodes[i])
+                const currentDataOrder = rightDomChildNodes[i].getAttribute('data-order')
+                const imgDataOrder = rightDomChildNodes[i].getElementsByTagName('img')[0].getAttribute('data-order')
+                console.log('currentDataOrder', currentDataOrder)
+                console.log('imgDataOrder', imgDataOrder)
+                if (currentDataOrder !== imgDataOrder) {
+                    return message.warn('拼图位置错误：\t第' + currentDataOrder+'张图片')
+                }
+            }
+            else {
+                return message.warn('没有完成拼图，请拖拽图片')
+            }
+        }
+    }
+    else {
+        return message.warn('没有完成拼图，请拖拽图片')
+    }
+    return '恭喜你完成拼图'
+}
+
 // 生命周期
 onMounted(() => {
-    const dragArr=state.dragConfig.sourceArray.map(item=>{
-        return state.dragConfig.dragDomPrefix+'-'+item.id
+    // 拖拽对象
+    const dragArr = state.dragConfig.sourceArray.map(item => {
+        return state.dragConfig.dragDomPrefix + '-' + item.id
     })
-    dragArr.forEach(id=>{
+    dragArr.forEach(id => {
         initDragAction(document.getElementById(id))
     })
-    const targetArr=state.dragConfig.sourceArray.map(item=>{
-        return state.dragConfig.targetDomPrefix+'-'+item.id
+
+
+    // 目标对象
+    const sourceArr = state.dragConfig.sourceArray.map(item => {
+        return state.dragConfig.sourceDomPrefix + '-' + item.id
     })
-    targetArr.forEach(id=>{
+    sourceArr.forEach(id => {
+        initTargetAction(document.getElementById(id))
+    })
+
+    const targetArr = state.dragConfig.sourceArray.map(item => {
+        return state.dragConfig.targetDomPrefix + '-' + item.id
+    })
+    targetArr.forEach(id => {
         initTargetAction(document.getElementById(id))
     })
 })
@@ -156,6 +215,7 @@ onMounted(() => {
 
 <style>
 .container-drag {
+
     min-width: 800px;
 }
 
@@ -175,36 +235,33 @@ onMounted(() => {
 }
 
 .container-drag-right {
-    width: 800px;
+    width: 600px;
     height: 600px;
-    margin:0;
+    margin: 0;
 }
 
 .drag-item-box {
     display: inline-block;
     margin: 2px;
     padding: 0;
-    width: 300px;
-    height: 300px;
-    line-height: 300px;
-    border: 1px solid rgb(24, 144, 255);
+    width: 280px;
+    height: 280px;
+    border: 1px solid rgb(255, 255, 255);
     overflow: hidden;
-    
+
 }
 
 
-.target-item-box{
+.target-item-box {
     display: inline-block;
-    font-size: 0;
-    -webkit-text-size-adjust:none;
     width: 280px;
     height: 280px;
-    border: 1px solid rgb(24, 144, 255);
+    border: 1px solid rgb(255, 255, 255);
     box-sizing: border-box;
     overflow: hidden;
-    margin-right:5px;
-    margin-bottom:0;
-    margin-top:0;
+    margin-right: 5px;
+    margin-bottom: 0;
+    margin-top: 0;
 }
 
 /* 拖拽对象 */
@@ -221,6 +278,6 @@ onMounted(() => {
 
 /* 悬浮上方 */
 .dragover {
-    opacity: .5;
+    background: rgba(0,255,0,.5);
 }
 </style>
\ No newline at end of file