拖动这些虚拟元素，费点事。但别怕，跟着我来就行！
首先，我们要弄懂clientY、pageY、screenY、layerY和offsetY这些记录鼠标位置的东东。虽然看上去都长得差不多，但是用起来就有点麻烦了。不用担心跟我慢慢学呗！
咱们来聊聊几个神奇的坐标系：evt.screenX和evt.screenY是你电脑屏幕上看到的位置，起点就是左上角哦；再来看看evt.clientX和 evt.clientY，这是从你正在浏览的网页看起的位置，也是左上角为起点，但要注意的是，它们不包括滚动条的部分哟；然后是evt.pageX和evt.pageY，这对组合考虑到了滚动条的位置，还是以浏览器左上角为准哦；最后是evt.offsetX和evt.offsetY，这两个就是相对于自己左上角的定位。
来，我们聊聊如何拖动东西？很容易，只要把拖动改成自定义指令。只要在合适的位置说出指令，物品随你拖拽。接下来我给大家看看全局指令代码到底是什么鬼。
咱们就聊聊这个，希望能帮到你。记得经常过来看看~
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*设置一下背景*/
}
{{positionX}}
{{positionY}}
//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:{},
});
快来好奇一下？不是说过要学着编写一个能拖动的 Vue app吗？其实超级容易滴！现在就要开始咯，相信你肯定会找到办法学到新知识！准备好没？接下来咱们一起学习怎么用 Vue搞定拖拽功能！别忘了分享给小伙伴们，大家一起努力前进！
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(leftinnerWidth-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;
};
}
}
});
评论0