在實(shí)現(xiàn)拖拽效果時(shí)需要先理解clientY pageY screenY layerY offsetY的區(qū)別
- clientY 指的是距離可視頁(yè)面左上角的距離
- pageY 指的是距離可視頁(yè)面左上角的距離(不受頁(yè)面滾動(dòng)影響)
- screenY 指的是距離屏幕左上角的距離
- layerY 指的是找到它或它父級(jí)元素中最近具有定位的左上角距離
- offsetY 指的是距離它自己左上角的距離
思路
- onmousedown：鼠標(biāo)按下事件
- onmousemove：鼠標(biāo)移動(dòng)事件
- onmouseup：鼠標(biāo)抬起事件
拖拽的基本原理就是根據(jù)鼠標(biāo)的移動(dòng)來(lái)移動(dòng)被拖拽的元素德玫。鼠標(biāo)的移動(dòng)也就是x、y坐標(biāo)的變化;元素的移動(dòng)就是style.position的 top和left的改變椎麦。當(dāng)然宰僧，并不是任何時(shí)候移動(dòng)鼠標(biāo)都要造成元素的移動(dòng)，而應(yīng)該判斷鼠標(biāo)左鍵的狀態(tài)是否為按下?tīng)顟B(tài)观挎，是否是在可拖拽的元素上按下
拖拽狀態(tài) = 鼠標(biāo)在元素上按下的時(shí)候{
記錄下鼠標(biāo)的x和y坐標(biāo)
記錄下元素的x和y坐標(biāo)
}
鼠標(biāo)在元素上移動(dòng)的時(shí)候{
元素y = 現(xiàn)在鼠標(biāo)y - 原來(lái)鼠標(biāo)y + 原來(lái)元素y
元素x = 現(xiàn)在鼠標(biāo)x - 原來(lái)鼠標(biāo)x + 原來(lái)元素x
}
鼠標(biāo)在任何時(shí)候放開(kāi)的時(shí)候{
鼠標(biāo)彈起來(lái)的時(shí)候不再移動(dòng)
}
直接上代碼撒桨，代碼中有注釋
<template>
<div class="drag">
<div class="drag_box" v-drag></div>
</div>
</template>
<script>
export default {
name: "drag",
data() {
return {};
},
//注冊(cè)局部組件指令
directives: {
drag: function(el) {
let dragBox = el; //獲取當(dāng)前元素
dragBox.onmousedown = e => {
//算出鼠標(biāo)相對(duì)元素的位置
let disX = e.clientX - dragBox.offsetLeft;
let disY = e.clientY - dragBox.offsetTop;
document.onmousemove = e => {
//用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//移動(dòng)當(dāng)前元素
dragBox.style.left = left + "px";
dragBox.style.top = top + "px";
};
document.onmouseup = e => {
//鼠標(biāo)彈起來(lái)的時(shí)候不再移動(dòng)
document.onmousemove = null;
//預(yù)防鼠標(biāo)彈起來(lái)后還會(huì)循環(huán)（即預(yù)防鼠標(biāo)放上去的時(shí)候還會(huì)移動(dòng)）
document.onmouseup = null;
};
};
}
}
};
</script>
<style scoped>
.drag {
width: 100%;
height: 500px;
background-color: #fff;
}
.drag_box {
width: 150px;
height: 90px;
border: 1px solid #666;
background-color: #ccc;
/* 使用定位键兜，脫離文檔流 */
position: relative;
top: 100px;
left: 100px;
/* 鼠標(biāo)移入變成拖拽手勢(shì) */
cursor: move;
z-index: 3000;
}
</style>
實(shí)現(xiàn)效果截圖
這里卿洋
愿喜??
