Vue 实现拼图校验效果

思路

Vue 实现拼图校验效果_第1张图片

  • 拖动下面的方块使上面的方块同时拖动指导指定位置范围则表示成功
    • 拖动使用 Touch 事件监听元素节点的移动
    • 拼图右边缺口使用元素加透明度,左侧高亮部分使用元素的背景图来定位元素
    • 移动使用 CSSleft 属性
  • 由于我们在拖动的时候,1px 不差有点难以精准,所以需要一个像素范围,这里默认是 5px
    • 计算时加减 5px 即可
  • 如果拖动释放,则需要返回原位置,加个过渡动画,class 控制
    • 通过 CSSanimation 属性来实现过渡动画

实现代码





扩展

  • 演示地址:
    • 拼图校验
  • 源代码:
    • 基于 Vue3.x
    • 基于 Vue2.x

你可能感兴趣的:(Vue.js,前端,vue.js,javascript,前端)