clientY 指的是距離可視頁(yè)面左上角的距離
pageY 指的是距離可視頁(yè)面左上角的距離(不受頁(yè)面滾動(dòng)影響)
screenY 指的是距離屏幕左上角的距離
layerY 指的是找到它或它父級(jí)元素中最近具有定位的左上角距離
offsetY 指的是距離它自己左上角的距離
clientY 距離頁(yè)面左上角距離 受頁(yè)面滾動(dòng)的影響
pageY 距離頁(yè)面左上角的距離 不受頁(yè)面滾動(dòng)影響
layerY 距離元素的左上角距離 受元素的定位的影響，會(huì)從本元素往上找到第一個(gè)定位的元素的左上角
offsetY 距離元素左上角的距離 計(jì)算相對(duì)于本元素的左上角逢勾，不在乎定位問(wèn)題纱烘，計(jì)算的是內(nèi)交點(diǎn)杨拐。是IE瀏覽器的特有屬性
image.png
實(shí)現(xiàn)拖拽功能
<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*設(shè)置一下背景*/
}
</style>
<body>
<div id="app" @mousedown="move"> <!--綁定按下事件-->
{{positionX}}
{{positionY}}
</div>
</body>
//main.js
let app = new Vue({
el:'#app',
data:{
positionX:0,
positionY:0,
},
methods:{
move(e){
let odiv = e.target; //獲取目標(biāo)元素
//算出鼠標(biāo)相對(duì)元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠標(biāo)按下并移動(dòng)的事件
//用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//綁定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移動(dòng)當(dāng)前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
},
computed:{},
});
當(dāng)然，我們可以將它綁定為一個(gè)自定義指令，這樣的話就可以用調(diào)用指令的形式來(lái)實(shí)現(xiàn)拖拽效果货裹，下面是定義自定義指令的代碼
// darg.html
<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*設(shè)置一下背景*/
}
</style>
<body>
<div id="app" v-drag> <!--實(shí)現(xiàn)用指令形式實(shí)現(xiàn)拖拽效果-->
</div>
</body>
//main.js
let app = new Vue({
el:'#app',
data:{},
methods:{},
directives: {
drag: {
// 指令的定義
bind: function (el) {
let odiv = el; //獲取當(dāng)前元素
oDiv.onmousedown = (e) => {
//算出鼠標(biāo)相對(duì)元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{
//用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//綁定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移動(dòng)當(dāng)前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
}
});
