<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习:自定义指令实例(元素拖动)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app div{
width: 100px;
height: 100px;
position:absolute;
}
#app .hello{
background-color:red;
top:0;
left:0;
}
#app .world{
background-color:blue;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="app">
<div class="hello" v-drag>itapp {{msg}}</div>
<button type="button" @click="changeMsg()"> 改变msg</button>
</div>
<script>
// Vue.directive('drag',{});
// bind update 钩子函数可以调用
// bind :指令第一次绑定到元素上时调用,只调用一次,可执行初始化操作
Vue.directive('drag',function(el){
console.log('kkkkk');
el.onmousedown=function(e){
//获取鼠标点击处分别与div左边和上边的距离:鼠标位置-div位置
// var disX=e.clientX-el.offsetLeft; //e.offsetX
// var disY=e.clientY-el.offsetTop; // e.offsetY
var disX = e.offsetX;
var disY = e.offsetY;
//包含在onmousedown里面,表示点击后才移动,为防止鼠标移出div,使用document.onmousemove
document.onmousemove=function(e){
//获取移动后div的位置:鼠标位置-disX/disY
var l=e.clientX-disX;
var t=e.clientY-disY;
el.style.left=l+'px';
el.style.top=t+'px';
}
//停止移动
document.onmouseup=function(e){
document.onmousemove=null;
document.onmouseup=null;
}
}
});
var vm=new Vue({
el:'#app',
data:{
msg:'welcome to itapp',
username:'alice'
},
methods:{
changeMsg(){
this.msg='欢迎来到自定义指令实例(元素拖动)'
}
}
});
</script>
</body>
</html>
vue 简单小结-元素拖动
最新推荐文章于 2023-11-30 16:47:14 发布