怎樣使用Vue操作DIV

這次給大家?guī)碓鯓邮褂肰ue操作DIV，使用Vue操作DIV的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。愛掏網(wǎng) - it200.com

效果圖

?

demo1.gif

分清clientY pageY screenY layerY offsetY的區(qū)別

在我們想要做出拖拽這個效果的時候，我們需要分清這幾個屬性的區(qū)別，這幾個屬性都是計算鼠標(biāo)點(diǎn)擊的偏移值，我們需要對其進(jìn)行了解才可以繼續(xù)實(shí)現(xiàn)我們的拖拽效果

clientY 指的是距離可視頁面左上角的距離
pageY 指的是距離可視頁面左上角的距離(不受頁面滾動影響)
screenY 指的是距離屏幕左上角的距離
layerY 指的是找到它或它父級元素中最近具有定位的左上角距離
offsetY 指的是距離它自己左上角的距離
一張圖帶大家簡單了解了解

?

區(qū)別

在我們簡單了解完這些個屬性以后，有幾個屬性需要分清。愛掏網(wǎng) - it200.com

?

layerY與offsetY區(qū)別

實(shí)現(xiàn)拖拽功能

我們既然熟悉了這幾個偏移屬性的意思，那么我們就進(jìn)入我們的重點(diǎn)。愛掏網(wǎng) - it200.com話不多說直接上代碼

// darg.html

??
????
????{{positionX}}
????{{positionY}}
??

//main.js
let?app?=?new?Vue({
??el:'#app',
??data:{
????positionX:0,
????positionY:0,
??},
??methods:{
????move(e){
??????let?op?=?e.target;????//獲取目標(biāo)元素
??????
??????//算出鼠標(biāo)相對元素的位置
??????let?disX?=?e.clientX?-?op.offsetLeft;
??????let?disY?=?e.clientY?-?op.offsetTop;
??????document.onmousemove?=?(e)=>{????//鼠標(biāo)按下并移動的事件
????????//用鼠標(biāo)的位置減去鼠標(biāo)相對元素的位置，得到元素的位置
????????let?left?=?e.clientX?-?disX;??
????????let?top?=?e.clientY?-?disY;
????????
????????//綁定元素位置到positionX和positionY上面
????????this.positionX?=?top;
????????this.positionY?=?left;
????????
????????//移動當(dāng)前元素
????????op.style.left?=?left?+?'px';
????????op.style.top?=?top?+?'px';
??????};
??????document.onmouseup?=?(e)?=>?{
????????document.onmousemove?=?null;
????????document.onmouseup?=?null;
??????};
????}??
??
??},
??computed:{},
});

當(dāng)然，我們可以將它綁定為一個自定義指令，這樣的話就可以用調(diào)用指令的形式來實(shí)現(xiàn)拖拽效果，下面是定義自定義指令的代碼

// darg.html

??
????
????
??

//main.js
let?app?=?new?Vue({
??el:'#app',
??data:{},
??methods:{},
??directives:?{
????drag:?{
??????//?指令的定義
??????bind:?function?(el)?{
????????let?op?=?el;??//獲取當(dāng)前元素
????????op.onmousedown?=?(e)?=>?{
??????????//算出鼠標(biāo)相對元素的位置
??????????let?disX?=?e.clientX?-?op.offsetLeft;
??????????let?disY?=?e.clientY?-?op.offsetTop;
??????????
??????????document.onmousemove?=?(e)=>{
????????????//用鼠標(biāo)的位置減去鼠標(biāo)相對元素的位置，得到元素的位置
????????????let?left?=?e.clientX?-?disX;??
????????????let?top?=?e.clientY?-?disY;
???????????
????????????//綁定元素位置到positionX和positionY上面
????????????this.positionX?=?top;
????????????this.positionY?=?left;
????????
????????????//移動當(dāng)前元素
????????????op.style.left?=?left?+?'px';
????????????op.style.top?=?top?+?'px';
??????????};
??????????document.onmouseup?=?(e)?=>?{
????????????document.onmousemove?=?null;
????????????document.onmouseup?=?null;
??????????};
????????};
??????}
????}
??}
});

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！

推薦閱讀：

utils.js使用案例詳解

Nuxt.js SSR的權(quán)限驗(yàn)證使用

以上就是怎樣使用Vue操作DIV的詳細(xì)內(nèi)容，更多請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！