前言

本案例需要基于后端给出的接口：
首先是获取拼图的接口，会提供前端一块大的拼图，也就是挖空拼图了的背景图；会提供前端一块小拼图，也就是拼图本体；然后是小拼图相对大图的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"><divref="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"><imgclass="right-drag"src="@/assets/images/index/right-drag-rect.jpg"alt="move"/></div></div></div>
</div>

.img-wrapper {position: relative;width: 240px;height: 220px;margin: 0 auto;.bounder {box-sizing: content-box;border: 1px solid #666;background: rgb(238, 238, 238);position: relative;height: 45px;width: 100%;margin: 0 auto;bottom: -20px !important;}.big-img {width: 240px;height: 160px;}.small-img {// &:hover {//   cursor: pointer;// }position: absolute;top: 0;left: 0;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.13);}.handler {height: 45px;&:hover {cursor: pointer;}}.right-drag {height: 45px;width: 55px;}
}

2. 初始化相关数据

我是用element-ui的dialog组件的，在打开dialog的时候进行相关初始化，getCode就是获取大图、拼图、以及y轴坐标的；

handleOpenDialog() {this.getCode();if (!this.smallDom || !this.bigDom) {this.smallDom = this.$refs.smallImg;this.bigDom = this.$refs.bigImg;this.draggableValue.boundingElement = this.$refs.bounder;this.draggableValue.handle = this.$refs.handler;this.handlerDom = this.$refs.handler;this.draggableWrapperDom = this.$refs.draggableWrapper;}
},

//多的1px是因为bounder
getCode() {jyajax.get("/xxx/code/slide").then(res => {this.imaObj.bigImage = "data:image/png;base64," + res.data.bigImage;this.imaObj.smallImage = "data:image/png;base64," + res.data.smallImage;this.imaObj.yHeight = res.data.yHeight;// this.imaObj.xWidth = res.data.xWidth;this.verifyImg.length = 0;this.verifyImg.push(this.imaObj.bigImage);const draggableState = JSON.parse(this.handlerDom.getAttribute("draggable-state"));const boundingClientRect = this.bigDom.getBoundingClientRect();draggableState.currentDragPosition.left = boundingClientRect.left + 1;draggableState.startDragPosition = draggableState.currentDragPosition;this.handlerDom.setAttribute("draggable-state",JSON.stringify(draggableState));this.handlerDom.style.left =draggableState.currentDragPosition.left + "px";this.draggableWrapperDom.style.left = this.handlerDom.style.left;});
},

二、拖拽逻辑

onDragEnd: function(positionDiff, absolutePosition, event) {const draggableState = JSON.parse(this.handlerDom.getAttribute("draggable-state"));const boundingClientRect = this.bigDom.getBoundingClientRect();const currentDragPosition = draggableState.currentDragPosition;this.$http.get("/xxx/code/sms", {moveLength: currentDragPosition.left - boundingClientRect.x,phone: this.ruleForm.phone,yHeight: this.imaObj.yHeight}).then(res => {if (res.code === 1) {this.$message.success("验证成功!");} else {if (res.code === -1) {this.dialogVisible = false;}if (res.code === -2) {this.getCode();}this.$message({showClose: true,message: res.msg,type: "error"});}}).catch(err => {this.$message.error(err);});
},

总结

实习期间做的一个小小挑战，完成效果挺差的，用了近乎原生的手段完成，仅作一年前的个人记录和一些参考。
内容不完整，考虑到代码保密问题。

Vue实现拖拽拼图滑块验证相关推荐

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse ...
基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
vue+element制作音乐播放器播放进度条bug(鼠标拖拽slider滑块滑动到指定位置无效)
最开始bug还没解决时的效果图 bug解决后的效果图项目场景: 想自己做一个基于vue仿网易云音乐的音乐网站,在制作播放器的时候用到了element ui里面的slider组件,制作完成后发现使用c ...

Vue实现拖拽拼图滑块验证

Vue实现拖拽拼图验证

前言

一、放置拼图

1. HTML结构以及CSS

2. 初始化相关数据

二、拖拽逻辑

总结

Vue实现拖拽拼图滑块验证相关推荐

最新文章

热门文章