溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用vue實現(xiàn)拖拽效果的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
vue中實現(xiàn)拖拽效果，供大家參考，具體內(nèi)容如下
首先要搞明白分清clientY pageY screenY layerY offsetY的區(qū)別
作用3（事件對象中記錄的鼠標位置）
語法 解釋
evt.screenX 相對于屏幕的左上角為原點
evt.screenY
evt.clientX 相對于瀏覽器的客戶端左上角為原點（不計算滾動條位置）
evt.clientY
evt.pageX 相對于瀏覽器的客戶端左上角為原點（計算滾動條的位置）
evt.pageY
evt.offsetX 以自己的左上角為原點
evt.offsetY
evt.pageY/evt.pageX 相當于文檔的左上角為原點，即包括被被隱藏的距離；
evt.clientY/evt.clientX 相當于瀏覽器可視窗口的左上角為原點，即不包括被被隱藏的距離；
實現(xiàn)拖拽功能
<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*設置一下背景*/
}
</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; //獲取目標元素
//算出鼠標相對元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠標按下并移動的事件
//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//綁定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移動當前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
},
computed:{},
});當然，我們可以將它綁定為一個自定義指令，這樣的話就可以用調(diào)用指令的形式來實現(xiàn)拖拽效果，下面是定義自定義指令的代碼
在main.js中定義全局指令
Vue.directive('drag'
drag: {
// 指令的定義
bind(el) {
let odiv = el; //獲取當前元素
oDiv.onmousedown = (e) => {
//算出鼠標相對元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{
//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
if(left<3) {
left=0;
odiv.style.width="2px";
}else{odiv.style.width="auto";}
if(left>innerWidth-odiv.offsetWidth) {left=innerWidth- odiv.offsetWidth;odiv.style.width="2px";}
//移動當前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
});以上是“使用vue實現(xiàn)拖拽效果的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
