drag

--- theme: channing-cyan --- 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，[点击查看活动详情](https://juejin.cn/post/7167294154827890702) # 前言不知各位朋友现在在`web`端进行登录的时候有没有注意一个变化，以前登录的时候是直接账号密码通过就可以直接登录，再后来图形验证码，数字结果运算验证，到现在的拼图验证。这一系列的转变都是为了防止机器操作，但对于我们来说，有亿点麻烦，但也没办法呀。今天我们也一起来做一个制造亿点麻烦的人，实现一个拼图验证。 ## 实现原理这个实现原理并不复杂，我们只需要一张图作为我们的拼接素材，我们再单独弄一个盒子，然后移动它，到我们的指定位置，到达指定范围内即验证通过，反之验证未通过。既然原理我们知道了，那我们就开干吧。 ## 实现前端登录拼图验证本篇文章以 `css` 为主， `javascript`为辅实现。 ### 搭建框架我们要实现这个功能，我们需要先搭建出来一个框架。 ```html // css // html

``` 我们画出来后，它就长下面图这样。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22595667f2f24d70973422baa982385e~tplv-k3u1fbpfcp-watermark.image?) ### 添加被校验区域及校验区域我们需要添加一个被校验的区域及校验区域，用来做我们的校验，像下图这两个东西。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01b8357cacf3473aa0ce10e3d1883932~tplv-k3u1fbpfcp-watermark.image?) 这里我们使用伪类来实现这两个区域。 **校验区域** ```css .check::before{ content: ''; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.5); border: 1px solid #fff; position: absolute; top: 100px; left: 280px; } ``` 这样一个校验区域就做好了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f15bb010c6a444d9beaaf6fed152c034~tplv-k3u1fbpfcp-watermark.image?) **被校验区域** 这里我们需要使用到`background-position`根据我们的校验区域大小进行切出我们的被校验区域。 `background-image`和`background-repeat`我们直接继承，`background-position`设置为校验区域的坐标位置（也就是距离`top`和`left`的距离），我们将`background-size`图片大小设为原盒子的大小。这样我们就得到了校验区域的那一片区域，也就是我们的被校验区域了。 ```css .check-child{ content: ''; width: 50px; height: 50px; border: 1px solid #fff; background-image: inherit; background-repeat: inherit; background-size: 400px 300px; background-position: -280px -100px; position: absolute; top: 100px; left: 10px; } // html

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff46a87254fe4329aa983cfedc96d5a4~tplv-k3u1fbpfcp-watermark.image?) ### 添加拖动条这里我们两个区域都添加完了，我们需要添加一个拖动条。我们先添加一个拖动区域。 ```html // css .drag{ width: 400px; height: 50px; background-color: #e3e3e3; margin-top: 10px; position: relative; } // html

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/535a9248c5b8401a9733264d2470c1c2~tplv-k3u1fbpfcp-watermark.image?) 现在拖动区域有了，我们需要在拖动区域内添加一个可拖动的盒子，及操作说明，不然看起来交互效果不友好。 #### 添加可拖动的盒子及交互说明我们添加一个可以拖动的盒子。 ```html // css .drag-child{ width: 50px; height: 50px; background-color: aquamarine; z-index: 10; position: absolute; top: 0; left: 0; } // html

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7441002317f149cd9912239abbe13d6f~tplv-k3u1fbpfcp-watermark.image?) 为了我们友好的交互，我们在拖动区域内给他添加操作说明。 ```html // css .drag-tips{ display: flex; align-items: center; justify-content: end; width: 95%; height: 100%; margin: 0 auto; font-size: 12px; color: #8a8a8a; } // html

按住左边按钮向右拖动完成上方图像验证

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6355c29a78ef40388f31b933d431819b~tplv-k3u1fbpfcp-watermark.image?) #### 拖动条动起来这一步我们需要让我们的拖动盒子动起来，让他可以在拖动区域内随意的左右拖动。 ```js // 获取元素实例 const drag = document.querySelector('.drag-child') // 声明鼠标按下事件 const dragMouseDown = event => { // 添加鼠标移动事件 document.addEventListener('mousemove', dragMouseMove) } // 监听鼠标移动事件 const dragMouseMove = event => { // 获取当前 x 轴坐标 const { offsetX } = event if(offsetX < 0 || offsetX > 350){ return } // 修改可移动盒子的 x 轴坐标 drag.style.transform = `translateX(${offsetX}px)` } // 结束鼠标监听事件 const dragMouseUP = event => { // 移除鼠标移动事件 document.removeEventListener('mousemove', dragMouseMove) } // 添加鼠标按下事件 document.addEventListener('mousedown', dragMouseDown) // 添加鼠标弹起事件 document.addEventListener('mouseup', dragMouseUP) ``` 现在我们的盒子就可以正常的拖动了，但现在它还有几个问题，我们后面来解决。 1. 提示文字会被选中； 2. 在`拖动区域`内拖动会闪烁； ### 联动被校验区域我们先让被校验区域跟着我们的拖动动起来。 ```js // 图形校验 const check = document.querySelector('.check-child') // 修改被校验区域坐标 check.style.left = `${offsetX}px` ``` 这样我们的被校验区域就能够跟着动了，我们声明一个方法用来表示，通过校验的回调。 ```js // 通过校验回调 const success = () => { console.log('通过校验'); } // 监听鼠标移动事件 const dragMouseMove = event => { // 获取当前 x 轴坐标 const { offsetX } = event if(offsetX < 0 || offsetX > 350){ return } // 修改可移动盒子的 x 轴坐标 drag.style.transform = `translateX(${offsetX}px)` // 修改被校验区域坐标 check.style.transform = `translateX(${offsetX}px)` if(offsetX >= 278 && offsetX <= 285){ // 执行回调 success() } } ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6f90f4a9d8b4cf0a587eea416f037da~tplv-k3u1fbpfcp-watermark.image?) ### 添加交互动画这里我们在鼠标移出监听的时候添加一个动画，当当前未通过校验的时候我们给他还原到初始位置。 ```css @keyframes move { to { transform: translateX(0); } } ``` ```js // 结束鼠标监听事件 const dragMouseUP = event => { // 移除鼠标移动事件 document.removeEventListener('mousemove', dragMouseMove) // 获取当前 x 轴坐标 const { offsetX } = event if(offsetX < 278 || offsetX > 285){ // 修改可移动盒子的 x 轴坐标 drag.style.animation = 'move 0.5s ease-in-out' // 修改被校验区域坐标 check.style.animation = 'move 0.5s ease-in-out' // 动画结束监听回调 const animationEnd = ()=>{ // 修改可移动盒子的 x 轴坐标 drag.style.transform = `translateX(${0}px)` // 修改被校验区域坐标 check.style.transform = `translateX(${0}px)` // 清除动画属性 drag.style.animation = '' check.style.animation = '' // 移出动画结束监听 document.removeEventListener("animationend", animationEnd) } // 添加动画结束监听 document.addEventListener("animationend", animationEnd) } } ``` 当我们未通过校验，且放开鼠标的时候，它就会自动回到初始位置。 ### 解决遗留问题 #### 1、提示文字会被选中我们在提示文字的样式中添加`user-select: none;`，禁用掉文字选择。 ```css /* 提示文字说明 */ .drag-tips{ display: flex; align-items: center; justify-content: end; width: 95%; height: 100%; margin: 0 auto; font-size: 12px; color: #8a8a8a; user-select: none; z-index: 1; position: absolute; top: 0; left: 0; } ``` #### 2、在`拖动区域`内拖动会闪烁我们将我们刚刚使用的`offsetX`改为`pageX`。这里需要注意一下边距偏移量的问题哦。 ```js // 监听鼠标移动事件 const dragMouseMove = event => { console.log(event); // 获取当前 x 轴坐标 const { pageX } = event if(pageX < 0 || pageX > 350){ return } // 修改可移动盒子的 x 轴坐标 drag.style.transform = `translateX(${pageX}px)` // 修改被校验区域坐标 check.style.transform = `translateX(${pageX}px)` if(pageX >= 278 && pageX <= 285){ // 执行回调 success() } } // 结束鼠标监听事件 const dragMouseUP = event => { // 移除鼠标移动事件 document.removeEventListener('mousemove', dragMouseMove) // 获取当前 x 轴坐标 const { pageX } = event if(pageX < 278 || pageX > 285){ // 修改可移动盒子的 x 轴坐标 drag.style.animation = 'move 0.5s ease-in-out' // 修改被校验区域坐标 check.style.animation = 'move 0.5s ease-in-out' // 动画结束监听回调 const animationEnd = ()=>{ // 修改可移动盒子的 x 轴坐标 drag.style.transform = `translateX(${0}px)` // 修改被校验区域坐标 check.style.transform = `translateX(${0}px)` // 清除动画属性 drag.style.animation = '' check.style.animation = '' // 移出动画结束监听 document.removeEventListener("animationend", animationEnd) } // 添加动画结束监听 document.addEventListener("animationend", animationEnd) } } ``` ## 效果图我们看一下效果图。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9ec22abf2584411a7b2b211d0f3185c~tplv-k3u1fbpfcp-watermark.image?) # 完整代码 ```html drag

按住左边按钮向右拖动完成上方图像验证

``` # 最后本篇`前端实现登录拼图验证`就到此结束了，这个功能一般都是在登录的时候用的。本篇文章的案例可以正常使用。本篇实现的代码中存在一个遗留问题，非拖动区域内能拖动。