日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

按住左邊滑塊 成上方拼圖( 二 )

云知道成上方拼圖


3、讓元素跟隨鼠標(biāo)點(diǎn)擊之后滑動(dòng)
這里其實(shí)原理非常簡(jiǎn)單，就是有一個(gè)注意點(diǎn) 。
原理：
鼠標(biāo)點(diǎn)擊之后記錄當(dāng)前坐標(biāo)，然后隨著（mousemove）滾動(dòng)的時(shí)候修改元素的left和top值就行了 。
還有一點(diǎn)就是鼠標(biāo)快速滑動(dòng)會(huì)導(dǎo)致丟失滑動(dòng)效果，這里需要用document，不能是元素級(jí)別的監(jiān)聽(tīng) 。
元素上面我只需要鑒定按下mousedown
代碼：
//鼠標(biāo)按下
drag(e) {
console.log(\”鼠標(biāo)按下\”, e);
let dom = e.target; //dom元素
let slider = document.querySelector(\”#sliderBlock\”); //滑塊dom
const downCoordinate = { x: e.x, y: e.y };
//正確的滑塊數(shù)據(jù)
let checkx = Number(this.slider.mx) – Number(this.slider.bx);
//x軸數(shù)據(jù)
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;
//允許正負(fù)誤差1
if ((max >= x && x >= min) || x === checkx) {
console.log(\”滑動(dòng)解鎖成功\”);
this.puzzle = true;
this.tips = \”驗(yàn)證成功\”;
setTimeout(() => {
this.visible = false;
}, 500);
} else {
console.log(\”拼圖位置不正確\”);
this.tips = \”驗(yàn)證失敗，請(qǐng)重試\”;
this.puzzle = false;
this.canvasInit();
}
};
document.addEventListener(\”mousemove\”, move);
document.addEventListener(\”mouseup\”, up);
}
4、完整的頁(yè)面代碼
<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>
<!–驗(yàn)證碼彈窗–>
<el-popover
popper-class=\”slidingPictures\”
ref=\”popover\”

推薦閱讀