|
|
本文参考孙卫琴，杜聚宾所创作的<<精通Vue.js: Web前端开发技术详解>>一书
本文介绍一个比较复杂的自定义指令v-drag，它支持用鼠标来拖曳网页上的特定DOM元素，参见例程1的v-drag.html。
例程1 v-drag.html<html>
<head>
<meta charset="UTF-8">
<title>Vue 范例 </title>
<script src="vue.js"></script>
<style>
#app div{
width: 100px;
height: 100px;
position:absolute;
}
#app .hello{
background-color:yellow;
top:0;
left:0;
}
#app .world{
background-color:pink;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="app">
<div class="hello" v-drag>Hello</div>
<div class="world" v-drag>World</div>
</div>
<script>
const app=Vue.createApp({})
app.directive('drag',(el)=>{
//处理在当前DOM元素中点击鼠标的事件
el.onmousedown=function(e){
//获取鼠标点击处分别与div左边和上边的距离：，取值为：鼠标位置-div位置
var disX=e.clientX-el.offsetLeft
var disY=e.clientY-el.offsetTop
console.log(disX,disY)
//处理在整个网页区域中移动鼠标的事件
document.onmousemove=function(e){
//获取移动后div的位置，取值为：鼠标位置-disX/disY
var l=e.clientX-disX
var t=e.clientY-disY
//重新设置DOM元素的位置，px是像素单位
el.style.left=l+'px'
el.style.top=t+'px'
}
//处理在整个网页区域中，鼠标弹起，停止移动鼠标的事件
document.onmouseup=function(e){
document.onmousemove=null
document.onmouseup=null
}
}
})
const vm=app.mount('#app')
</script>
</body>
</html> |
通过浏览器访问v-drag,html，会出现图1所示的网页。
图1 v-drag.html的网页
在v-drag.html页面上有两个不同颜色的方框，分别对应两个<div>元素：
<div class="hello" v-drag>Hello</div>
<div class="world" v-drag>World</div> |
用鼠标选中任意一个方框，在整个网页的区域内移动鼠标，方框就会随之移动，松开鼠标，方框就停止移动。
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 孙卫琴姐姐的Java技术专栏 』 → 【Vue.js技术专题】自定义指令范例：v-drag指令
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密