按住左边滑块成上方拼图( 二 ) _云知道

3、让元素跟随鼠标点击之后滑动
这里其实原理非常简单，就是有一个注意点。
原理：
鼠标点击之后记录当前坐标，然后随着（mousemove）滚动的时候修改元素的left和top值就行了。
还有一点就是鼠标快速滑动会导致丢失滑动效果，这里需要用document，不能是元素级别的监听。
元素上面我只需要鉴定按下mousedown
代码：
//鼠标按下
drag(e) {
console.log(\”鼠标按下\”, e);
let dom = e.target; //dom元素
let slider = document.querySelector(\”#sliderBlock\”); //滑块dom
const downCoordinate = { x: e.x, y: e.y };
//正确的滑块数据
let checkx = Number(this.slider.mx) – Number(this.slider.bx);
//x轴数据
let x = 0;
const move = moveEV => {
x = moveEV.x – downCoordinate.x;
//y = moveEV.y – downCoordinate.y;
if (x >= 251 || x <= 0) return false;
dom.style.left = x + \”px\”;
//dom.style.top = y + \”px\”;
slider.style.left = x + \”px\”;
};
const up = () => {
document.removeEventListener(\”mousemove\”, move);
document.removeEventListener(\”mouseup\”, up);
dom.style.left = \”\”;
console.log(x, checkx);
let max = checkx – 5;
let min = checkx – 10;
//允许正负误差1
if ((max >= x && x >= min) || x === checkx) {
console.log(\”滑动解锁成功\”);
this.puzzle = true;
this.tips = \”验证成功\”;
setTimeout(() => {
this.visible = false;
}, 500);
} else {
console.log(\”拼图位置不正确\”);
this.tips = \”验证失败，请重试\”;
this.puzzle = false;
this.canvasInit();
}
};
document.addEventListener(\”mousemove\”, move);
document.addEventListener(\”mouseup\”, up);
}
4、完整的页面代码
<template>
<div id=\”login\”>
<el-form class=\”loginFrom\” :model=\”logindata\” :rules=\”rules\” ref=\”ruleForm\”>
<el-form-item class=\”login-item\”>
<h1 class=\”login-title\”>海天酱油登录中心</h1>
</el-form-item>
<el-form-item prop=\”userName\”>
<el-input
class=\”login-inputorbuttom\”
prefix-icon=\”el-icon-user\”
placeholder=\”登录名\”
v-model=\”logindata.userName\”
></el-input>
</el-form-item>
<el-form-item prop=\”password\”>
<el-input
class=\”login-inputorbuttom\”
prefix-icon=\”el-icon-lock\”
placeholder=\”密码\”
v-model=\”logindata.password\”
></el-input>
</el-form-item>
<!–<el-form-item prop=\”verificationCode\”>
<el-input
class=\”login-inputorbuttom\”
v-model=\”logindata.verificationCode\”
></el-input>
</el-form-item>–>
<el-form-item class=\”login-item\”>
<el-button
class=\”login-inputorbuttom login-bottom\”
type=\”primary\”
v-popover:popover
@click=\”visible = !visible\”
>登录</el-button
>
</el-form-item>
</el-form>
<!–验证码弹窗–>
<el-popover
popper-class=\”slidingPictures\”
ref=\”popover\”

按住左边滑块成上方拼图( 二 )

推荐阅读

中国的四大海有哪些中国有哪四大海洋

大蒜放枕头下的功效大蒜放枕头底下有什么作用

电脑组装问题..高手请进..我想这样组装电脑可以吗？有

顾村公园门票

魔兽世界怀旧服污染者的专注怎么获取污染者的专注部件效果污染者的布质长靴

长沙失业保险金领过的还可以领吗？

香蜡怎么用

熙字笔画好多画

丝瓜老了如何判断

前药的名词解释

闽侯二中三收中多少人,拟将闽侯二中建成省一级校

w799，台版W799怎么样

雏菊如何醒花

深圳顺驰二手车，武汉顺驰怎么样

壶口名称是怎么得来的

高铁站前广场有什么声音，高铁路过声音会有多大有没有给形容一下的有没有住高铁旁边的

按住左边滑块 成上方拼图( 二 )

推荐阅读

按住左边滑块成上方拼图( 二 )