如何使用Vue實現拖拽效果pageY、screenY、clientY、layerY、offsetY
1.效果圖
2.分清clientY pageY screenY layerY offsetY的區別
在我們想要做出拖拽這個效果的時候，我們需要分清這幾個屬性的區別，這幾個屬性都是計算滑鼠點選的偏移值，我們需要對其進行了解才可以繼續實現我們的拖拽效果
clientY 指的是距離可視頁面左上角的距離
pageY 指的是距離可視頁面左上角的距離(不受頁面滾動影響)
screenY 指的是距離螢幕左上角的距離
layerY 指的是找到它或它父級元素中最近具有定位的左上角距離
offsetY 指的是距離它自己左上角的距離
一張圖帶大家簡單瞭解瞭解
3.在我們簡單瞭解完這些個屬性以後，有幾個屬性需要分清。
相同點 不同點
clientY 距離頁面左上角距離 受頁面滾動的影響
pageY 距離頁面左上角的距離 不受頁面滾動影響
相同點 不同點
layerY 距離元素的左上角距離 受元素的定位的影響，會從本元素往上找到第一個定位的元素的左上角
offsetY 距離元素左上角的距離 計算相對於本元素的左上角，不在乎定位問題，計算的是內交點。是IE瀏覽器的特有屬性
layerY與offsetY區別
4.實現拖拽功能
我們既然熟悉了這幾個偏移屬性的意思，那麼我們就進入我們的重點。話不多說直接上程式碼
// darg.html
<style>
#app 當然，我們可以將它繫結為一個自定義指令，這樣的話就可以用呼叫指令的形式來實現拖拽效果，下面是定義自定義指令的程式碼
// darg.html
<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*設定一下背景*/
}
</style>
<body>
<p id="app" v-drag> <!--實現用指令形式實現拖拽效果-->
</p>
</body>
//main.js
let app = new Vue({
el:'#app',
data:{},
methods:{},
directives: {
drag: {
// 指令的定義
bind: function (el) {
let op = el; //獲取當前元素
op.onmousedown = (e) => {
//算出滑鼠相對元素的位置
let disX = e.clientX - op.offsetLeft;
let disY = e.clientY - op.offsetTop;
document.onmousemove = (e)=>{
//用滑鼠的位置減去滑鼠相對元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//繫結元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移動當前元素
op.style.left = left + 'px';
op.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
}
});最後
到這裡我們就已經把拖拽效果用Vue實現了，我們用了兩種不同的方式實現了拖拽，但實際上換湯不換藥，我們需要弄清楚pageY、screenY、clientY、layerY、offsetY等區別。當然我們同時也學習了Vue的一些方法，例如自定義指令等。