Vue实现拖拽拼图滑块验证

---

前言

本案例需要基于后端给出的接口：
首先是获取拼图的接口，会提供前端一块大的拼图，也就是挖空拼图了的背景图；会提供前端一块小拼图，也就是拼图本体；然后是小拼图相对大图的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=