孙卫琴的《精通Vue.js》读书笔记-自定义指令范例：v-drag指令-优快云博客

本文链接：https://blog.youkuaiyun.com/csdnuserlala/article/details/126605242

本文参考孙卫琴，杜聚宾所创作的 <<精通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 class="hello" v-drag>Hello</div>
    <div class="world" v-drag>World</div>

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