前端vue3——實現二次元人物拼圖校驗

文章目錄

- ?前言
- ?vue3拖拽實現拼圖
- - 💖 思路分解
  - 💖 布局結構
  - 💖 拖拽函數
  - 💖 校驗函數
  - 💖 inscode整體代碼
- ?運行效果
- - 💖 隨機順序
  - 💖 拖拽中
  - 💖 校驗失敗
  - 💖 校驗通過
- ?總結
- ?結束

?前言

大家好，我是yma16，本文分享關于前端vue3——實現二次元人物拼圖校驗。
vue3系列相關文章：
vue3 + fastapi 實現選擇目錄所有文件自定義上傳到服務器
前端vue2、vue3去掉url路由“ # ”號——nginx配置
csdn新星計劃vue3+ts+antd賽道——利用inscode搭建vue3(ts)+antd前端模板
認識vite_vue3 初始化項目到打包
python_selenuim獲取csdn新星賽道選手所在城市用echarts地圖顯示
讓大模型分析csdn文章質量 —— 提取csdn博客評論在文心一言分析評論區內容
前端vue3——html2canvas給網站截圖生成宣傳海報
拖拽相關文章
前端——html拖拽原理

前端html拖拽原理
HTML 拖拽的基本原理是通過鼠標事件和 DOM 操作來實現的。

一般來說，拖拽操作包括三個階段：

鼠標按下事件：當用戶按下鼠標左鍵時，觸發鼠標按下事件。在該事件處理函數中，首先需要記錄下被拖拽元素的相關信息，比如該元素的位置、大小和初始鼠標點擊位置等。
鼠標移動事件：當用戶按下鼠標左鍵時并拖動鼠標時，觸發鼠標移動事件。在該事件處理函數中，需要根據鼠標當前位置和拖拽元素的初始位置，計算出該元素要被移動的距離，并在 DOM 中更新該元素的位置。
鼠標松開事件：當用戶松開鼠標左鍵時，觸發鼠標松開事件。在該事件處理函數中，需要清除拖拽元素的相關信息，比如初始鼠標點擊位置等。

在以上三個階段中，需要使用的 DOM 操作包括：

獲取 DOM 元素：可以使用 document.getElementById() 或 document.querySelector() 等方法來獲取需要拖拽的元素。
更新元素位置：可以使用元素的 style 屬性來修改元素的位置，比如設置元素的 left 和 top 屬性。
創建新元素：可以使用 document.createElement() 方法來創建新的 DOM 元素。

通過以上鼠標事件和 DOM 操作的組合，可以實現基本的 HTML 拖拽功能。

?vue3拖拽實現拼圖

使用vue3和原生的html drag 實現片的拖拽

💖 思路分解

拆分圖片為4宮格樣式
定義拖拽的樣式div對應圖片的4宮格
定義拖拽的div元素，背景圖片使用圖片拆分的素材
給元素定義序號
校驗最終的元素序號，判斷是否拼圖成功

拆分圖片
split-image

💖 布局結構

才有左右布局
左側：拖拽來源區域
右側：拖拽放入區域
template布局

<template><div class="container-drag"><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":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" 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>

css配置

<style>
.container-drag {min-width: 800px;
}.random-button {margin: 5px;cursor: pointer;
}.container-drag-box {display: flex;justify-content: space-between;
}.container-drag-left {width: 800px;}.container-drag-right {width: 600px;height: 600px;margin: 0;
}.drag-item-box {display: inline-block;margin: 2px;padding: 0;width: 280px;height: 280px;border: 1px solid rgb(24, 144, 255);overflow: hidden;}.target-item-box {display: inline-block;width: 280px;height: 280px;border: 1px solid rgb(255, 255, 255);box-sizing: border-box;overflow: hidden;margin-right: 5px;margin-bottom: 0;margin-top: 0;
}/* 拖拽對象 */
.drag-item {margin: 0;text-align: center;cursor: pointer;
}/* 拖拽中 */
.dragging {opacity: .5;
}/* 懸浮上方 */
.dragover {background: rgba(0,255,0,.5);
}
</style>

布局效果
box-left

💖 拖拽函數

拖拽對象配置方法drag，dragstart，dragend
放入區域配置方法drop，dragover，dragleave，dragenter

// 拖拽對象
const drag = (event) => {console.log("dragging", event);
}const dragStart = (event) => {// 保存被拖動元素的引用state.dragConfig.dragTarget = event.target;// 設置為半透明event.target.classList.add("dragging");
}const dragEnd = (event) => {// 拖動結束，重置透明度event.target.classList.remove("dragging");
}// 目標對象const dragOver = (event) => {// 阻止默認行為以允許放置event.preventDefault();
}const dragLeave = (event) => {// 在可拖動元素離開潛在放置目標元素時重置該目標的背景if (event.target.classList.contains("dropzone")) {event.target.classList.remove("dragover");}
}const dragEnter = (event) => {// 在可拖動元素進入潛在的放置目標時高亮顯示該目標if (event.target.classList.contains("dropzone")) {event.target.classList.add("dragover");}
}const drop = (event) => {// 阻止默認行為（會作為某些元素的鏈接打開）event.preventDefault();// 將被拖動元素移動到選定的目標元素中if (event.target.classList.contains("dropzone")) {event.target.classList.remove("dragover");// 刪除自身state.dragConfig.dragTarget.parentNode.removeChild(state.dragConfig.dragTarget);// 添加元素event.target.appendChild(state.dragConfig.dragTarget);}
}const initDragAction = (sourceElement) => {if (!sourceElement) {return}/* 在放置拖拽對象上觸發的事件 */sourceElement.addEventListener("drag", drag);sourceElement.addEventListener("dragstart", dragStart);sourceElement.addEventListener("dragend", dragEnd);
}const initTargetAction = (targetElement) => {if (!targetElement) {return}/* 在放置目標對象上觸發的事件 */targetElement.addEventListener("dragover",dragOver,false,);targetElement.addEventListener("dragenter", dragEnter);targetElement.addEventListener("dragleave", dragLeave);targetElement.addEventListener("drop", drop);
}

💖 校驗函數

遍歷dom節點獲取自定義的data-order屬性進行校驗

// 校驗
const confirmImg = () => {const rightDom = document.getElementById('target-box-id')console.log('rightDom', rightDom)const rightDomChildNodes = rightDom.childNodesconsole.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 '恭喜你完成拼圖'
}

💖 inscode整體代碼

完整的vue代碼

<template><div class="container-drag"><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":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" 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: {sourceDomPrefix: 'source-item',targetDomPrefix: 'target-item',dragDomPrefix: 'drag-item',dragTarget: null,sourceImg: '/img/imageSource.png',sourceArray: [{id: 1,src: '/img/image1.png'},{id: 2,src: '/img/image2.png'},{id: 3,src: '/img/image3.png'},{id: 4,src: '/img/image4.png'},]}
})
// 數組隨機順序
const randomDragOrder = () => {const sourceArray = [...state.dragConfig.sourceArray]sourceArray.sort(() => Math.random() - 0.5);state.dragConfig.sourceArray = sourceArray
}// 拖拽對象
const drag = (event) => {console.log("dragging", event);
}const dragStart = (event) => {// 保存被拖動元素的引用state.dragConfig.dragTarget = event.target;// 設置為半透明event.target.classList.add("dragging");
}const dragEnd = (event) => {// 拖動結束，重置透明度event.target.classList.remove("dragging");
}// 目標對象const dragOver = (event) => {// 阻止默認行為以允許放置event.preventDefault();
}const dragLeave = (event) => {// 在可拖動元素離開潛在放置目標元素時重置該目標的背景if (event.target.classList.contains("dropzone")) {event.target.classList.remove("dragover");}
}const dragEnter = (event) => {// 在可拖動元素進入潛在的放置目標時高亮顯示該目標if (event.target.classList.contains("dropzone")) {event.target.classList.add("dragover");}
}const drop = (event) => {// 阻止默認行為（會作為某些元素的鏈接打開）event.preventDefault();// 將被拖動元素移動到選定的目標元素中if (event.target.classList.contains("dropzone")) {event.target.classList.remove("dragover");// 刪除自身state.dragConfig.dragTarget.parentNode.removeChild(state.dragConfig.dragTarget);// 添加元素event.target.appendChild(state.dragConfig.dragTarget);}
}const initDragAction = (sourceElement) => {if (!sourceElement) {return}/* 在放置拖拽對象上觸發的事件 */sourceElement.addEventListener("drag", drag);sourceElement.addEventListener("dragstart", dragStart);sourceElement.addEventListener("dragend", dragEnd);
}const initTargetAction = (targetElement) => {if (!targetElement) {return}/* 在放置目標對象上觸發的事件 */targetElement.addEventListener("dragover",dragOver,false,);targetElement.addEventListener("dragenter", dragEnter);targetElement.addEventListener("dragleave", dragLeave);targetElement.addEventListener("drop", drop);
}// 校驗
const confirmImg = () => {const rightDom = document.getElementById('target-box-id')console.log('rightDom', rightDom)const rightDomChildNodes = rightDom.childNodesconsole.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})dragArr.forEach(id => {initDragAction(document.getElementById(id))})// 目標對象const sourceArr = state.dragConfig.sourceArray.map(item => {return state.dragConfig.sourceDomPrefix + '-' + item.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))})
})</script><style>
.container-drag {min-width: 800px;
}.random-button {margin: 5px;cursor: pointer;
}.container-drag-box {display: flex;justify-content: space-between;
}.container-drag-left {width: 800px;}.container-drag-right {width: 600px;height: 600px;margin: 0;
}.drag-item-box {display: inline-block;margin: 2px;padding: 0;width: 280px;height: 280px;border: 1px solid rgb(255, 255, 255);overflow: hidden;}.target-item-box {display: inline-block;width: 280px;height: 280px;border: 1px solid rgb(255, 255, 255);box-sizing: border-box;overflow: hidden;margin-right: 5px;margin-bottom: 0;margin-top: 0;
}/* 拖拽對象 */
.drag-item {margin: 0;text-align: center;cursor: pointer;
}/* 拖拽中 */
.dragging {opacity: .5;
}/* 懸浮上方 */
.dragover {background: rgba(0,255,0,.5);
}
</style>

代碼放在inscode vue3項目在線運行

?運行效果

💖 隨機順序

random

💖 拖拽中

draging

💖 校驗失敗

verrify-error

💖 校驗通過

verrify-success
拖拽過程截圖

drag-process

?總結

拼圖校驗總結：

1.校驗的順序可以用元素的attribute傳遞位置順序進行標記
2.拖拽對象的函數使用拖拽對象配置方法drag，dragstart，dragend 放入區域配置方法drop，dragover，dragleave，dragenter

拖拽總結：

在HTML中，拖放（drag and
drop）是一種用戶界面交互的特定形式，其中用戶可以拖動元素或數據并將其放置在另一個位置。以下是HTML拖放的一些總結：

拖放可用于各種用途，例如重新排序列表，將文本或文件拖動到另一個應用程序中，或從文件資源管理器將文件拖動到Web頁面中。
在HTML中，拖放API由一些事件組成，包括dragstart、dragenter、dragover、dragleave、drop和dragend。
通過使用HTML data屬性，可以將數據附加到拖動事件，并在放置事件中訪問它們。
通過使用CSS，可以為用戶拖動時顯示的元素創建自定義外觀。
在JavaScript中，可以使用dragEvent對象來訪問有關拖動和放置事件的詳細信息，例如拖動元素的位置和放置元素的位置。
可以使用HTML5的拖放API創建復雜的拖放交互，例如可拖動的圖形和對象，將元素沿路徑拖動等。