前端vue3——实现二次元人物拼图校验

这篇具有很好参考价值的文章主要介绍了前端vue3——实现二次元人物拼图校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

⭐前言

大家好,我是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 操作来实现的。

一般来说,拖拽操作包括三个阶段:

  1. 鼠标按下事件:当用户按下鼠标左键时,触发鼠标按下事件。在该事件处理函数中,首先需要记录下被拖拽元素的相关信息,比如该元素的位置、大小和初始鼠标点击位置等。

  2. 鼠标移动事件:当用户按下鼠标左键时并拖动鼠标时,触发鼠标移动事件。在该事件处理函数中,需要根据鼠标当前位置和拖拽元素的初始位置,计算出该元素要被移动的距离,并在 DOM 中更新该元素的位置。

  3. 鼠标松开事件:当用户松开鼠标左键时,触发鼠标松开事件。在该事件处理函数中,需要清除拖拽元素的相关信息,比如初始鼠标点击位置等。

在以上三个阶段中,需要使用的 DOM 操作包括:

  1. 获取 DOM 元素:可以使用 document.getElementById() 或 document.querySelector() 等方法来获取需要拖拽的元素。

  2. 更新元素位置:可以使用元素的 style 属性来修改元素的位置,比如设置元素的 left 和 top 属性。

  3. 创建新元素:可以使用 document.createElement() 方法来创建新的 DOM 元素。

通过以上鼠标事件和 DOM 操作的组合,可以实现基本的 HTML 拖拽功能。

⭐vue3拖拽实现拼图

使用vue3和原生的html drag 实现片的拖拽

💖 思路分解

  1. 拆分图片为4宫格样式
  2. 定义拖拽的样式div对应图片的4宫格
  3. 定义拖拽的div元素,背景图片使用图片拆分的素材
  4. 给元素定义序号
  5. 校验最终的元素序号,判断是否拼图成功

拆分图片
前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

💖 布局结构

才有左右布局
左侧:拖拽来源区域
右侧:拖拽放入区域
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>

布局效果
前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

💖 拖拽函数

拖拽对象配置方法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.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 '恭喜你完成拼图'
}

💖 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.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
    })
    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项目在线运行

⭐运行效果

💖 随机顺序

前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

💖 拖拽中

前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

💖 校验失败

前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

💖 校验通过

前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式
拖拽过程截图

前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

⭐总结

拼图校验总结:

1.校验的顺序可以用元素的attribute传递位置顺序进行标记
2.拖拽对象的函数使用 拖拽对象配置方法drag,dragstart,dragend 放入区域配置方法drop,dragover,dragleave,dragenter

拖拽总结:

在HTML中,拖放(drag and
drop)是一种用户界面交互的特定形式,其中用户可以拖动元素或数据并将其放置在另一个位置。以下是HTML拖放的一些总结:

  1. 拖放可用于各种用途,例如重新排序列表,将文本或文件拖动到另一个应用程序中,或从文件资源管理器将文件拖动到Web页面中。
  2. 在HTML中,拖放API由一些事件组成,包括dragstart、dragenter、dragover、dragleave、drop和dragend。
  3. 通过使用HTML data属性,可以将数据附加到拖动事件,并在放置事件中访问它们。
  4. 通过使用CSS,可以为用户拖动时显示的元素创建自定义外观。
  5. 在JavaScript中,可以使用dragEvent对象来访问有关拖动和放置事件的详细信息,例如拖动元素的位置和放置元素的位置。
  6. 可以使用HTML5的拖放API创建复杂的拖放交互,例如可拖动的图形和对象,将元素沿路径拖动等。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
前端vue3——实现二次元人物拼图校验,JavaScript专栏,前端,javascript,vue3,拖拽图片校验,状态模式

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 感谢你的阅读!文章来源地址https://www.toymoban.com/news/detail-765055.html

到了这里,关于前端vue3——实现二次元人物拼图校验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前后端分离,使用vue3整合SpringSecurity加JWT实现登录校验

    前段时间写了一篇spring security的详细入门,但是没有联系实际。 所以这次在真实的项目中来演示一下怎样使用springsecurity来实现我们最常用的登录校验。本次演示使用现在市面上最常见的开发方式,前后端分离开发。前端使用vue3进行构建,用到了element-plus组件库、axios封装、

    2024年01月23日
    浏览(53)
  • Unity+讯飞星火大模型+Web api,实现二次元小姐姐AI聊天互动

            最近讯飞的星火大模型更新了2.0版本,增强了AI的语言生成能力。毕竟是国产大语言模型,我也尝试使用了一下星火大模型的应用广场,体验还是很不错的。应用广场提供了很多AI助手工具,也支持用户创建自己的AI助手,能力不局限于自然语言生成,也有一些图片生

    2024年02月08日
    浏览(53)
  • Vue3+Vite项目配置husky、stylelint、commitlint,实现git提交前代码校验

    做什么:本文将从零开始带你配置 husky 、 stylelint ,完成代码提交git前的强制校验,保证代码风格和一致性 技术栈:Vue3 + TypeScript + Vite 1.1 node.js v16.0.0 及以上 (我 v16.14.1) 1.2 pnpm v8.0.0 及以上(我 v8.6.6) 2.1 安装 pnpm 2.2 创建项目-不多赘述 3.1 安装 eslint 3.2 生成eslint配置文件

    2024年02月13日
    浏览(51)
  • [chatgpt+Azure]unity AI二次元小女友之使用微软Azure服务实现RestfulApi->语音识别+语音合成

            如题所述,这个小项目是在unity引擎端,使用了chatgpt+微软azure的一个AI二次元女友对话的项目,实现原理也比较简单,即在unity端实现AI二次元女友的交互界面,接入chatgpt-3.5-turbo的api接口,借助chatgpt的自然语言生成能力,作为这个项目的聊天引擎。聊天功能也比较

    2024年02月04日
    浏览(45)
  • vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能

    一、TableTreeLevel组件 

    2024年02月15日
    浏览(54)
  • 【Vue3+Ts project】vant4 实现触发指定表单 rules校验、setTimeout和 setInterval 区别

      一.使用 vant组件  validate属性 实现 触发指定输入框rules校验 ,满足校验通过否则失败  1. 给form表单绑定 ref并定义值名称 ,然后为你想校验的表单绑定 name值 2.为ref的值名称定义变量名 ,然后 ref值名称.value.validate(\\\'name值名称\\\'),.then接收成功 , .catch 接收失败   二. setT

    2024年02月11日
    浏览(59)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(56)
  • 二次元的登录界面

    今天还是继续坚持写博客,然后今天给大家带来比较具有二次元风格的登录界面,也只是用html和css来写的,大家可以来看看! 个人名片:  😊 作者简介:一名大一在校生,web前端开发专业  🤡  个人主页:几何小超  🐼 座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有

    2024年02月06日
    浏览(29)
  • stable diffusion--二次元福利

    “  继上次用stable diffusion生成谪仙男子外貌翻车后,痛定思痛,发现用stable diffusion webui这个神器,效果出乎意料的好。 ” 01 — 安装教程 1、pytorch安装 具体安装可查看我之前的图文libtorch导入模型 (qq.com) 2、clone开源项目 3、下载模型,有几十个G,将模型拷贝到modelsStable-d

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包