Vue实现拖拽拼图滑块验证

最新推荐文章于 2024-11-07 17:37:00 发布

原创

最新推荐文章于 2024-11-07 17:37:00 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #javascript #es6

本文介绍了如何使用Vue实现拖拽拼图滑块验证功能。首先，通过后端接口获取大图和小图，以及小图的初始位置。接着，搭建HTML结构和CSS样式，利用draggable-vue-directive插件实现拖拽功能。在打开弹窗时初始化数据，并在拖动过程中处理逻辑。最后，文章总结了这个挑战的完成情况，作为个人技术记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本案例需要基于后端给出的接口：
首先是获取拼图的接口，会提供前端一块大的拼图，也就是挖空拼图了的背景图；会提供前端一块小拼图，也就是拼图本体；然后是小拼图相对大图的y轴偏移值；
在这里插入图片描述

第二个是验证接口，将x轴的偏移值传给后端来做验证；

提示：以下是本篇文章正文内容，下面案例可供参考

一、放置拼图

1. HTML结构以及CSS

因为后端给的拼图大小为55 × 45，大图大小为240 × 160，所以我就这么设置了。
结构是这样考虑的，上方是大图，然后在一个bounder里放置小拼图以及拖拽栏。
使用到了draggable-vue-directive插件指令，详细看官方文档，此处不赘述：draggable-vue-directive

<div class="img-wrapper">
  <img :src="imaObj.bigImage" class="big-img" ref="bigImg" />
  <div class="bounder" ref="bounder">
    <div
      ref="draggableWrapper"
      v-draggable="draggableValue"
      style="top: 409.5px !important"
    >
      <img
        :src="imaObj.smallImage"
        ref="smallImg"
        class="small-img"
        :style="{ top: imaObj.yHeight - 184 + 'px' }"
      />
      <div class="handler" ref="handler">
        <img
          class