精通Vue.js系列 │ 自定义指令v-drag范例

清华计算机学堂 2022-09-21

365

自定义指令范例：v-drag指令

自定义指令范例：v-drag指令

本文介绍一个比较复杂的自定义指令v-drag，它支持用鼠标拖曳网页上的特定DOM元素，参见例程1。

■ 例程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>

用鼠标选中任意一个方框，在整个网页的区域内移动鼠标，方框就会随之移动，松开鼠标，方框就停止移动。

参考书籍

点击上图看详细图书介绍

《精通Vue.js：Web前端开发技术详解（微课视频版）》

详细阐述用Vue框架的各种技术；深刻揭示前端开发的响应式编程核心思想；介绍与其他流行技术的整合；典型范例帮助读者迅速获得实战经验。

ISBN：9787302602903

作者：孙卫琴，杜聚宾

价格：119元

扫码优惠购书

实例讲解

精通Vue.js：

Web前端开发技术详解

精彩回顾

5. 命名路由

6. CSS中DOM元素的过渡模式

7. 插槽slot的基本用法

8. 组件的递归

9. 在Vue项目中使用Axios

下期预告

11. Vuex中的异步操作

12. 分割setup函数

13. Vue组件的单向数据流

14. Vue的数据监听

软件 app

文章转载自清华计算机学堂，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

精通Vue.js系列 │ 自定义指令v-drag范例

评论