>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8398 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】自定义指令范例:v-drag指令 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 15:54:01     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的<<精通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所示的网页。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图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面向对象编程-->输入与输出(上)
  JavaWeb开发-->JSP技术详解(Ⅰ)
  JSP与Hibernate开发-->使用JPA和注解
  Java网络编程-->创建非阻塞的HTTP服务器
  精通Spring-->Vue组件开发基础
  Vue3开发-->Vue组件开发基础
  【Vue.js技术专题】路由导航中抓取数据
  【Vue.js技术专题】路由管理器的基本用法
  【Vue.js技术专题】CSS中DOM元素的过渡模式
  【Spring Cloud Alibaba专题】Seata的架构
  【Spring Cloud Alibaba专题】Nacos集群的Raft算法
  【Spring Cloud Alibaba专题】Nacos配置属性的持久化
  【Spring专题】用Spring框架进行文件下载
  【Spring专题】@Query注解设定查询语句
  从《精通Spring》和《精通Vue.js》的写作分享学习新技术的经...
  【Java网络编程专题】盘点用Java抓取HTTP服务器和FTP服务器的...
  【Java网络编程专题】创建基于SSL的安全服务器和安全客户的范...
  【Java网络编程专题】优化访问数据库的程序代码的一些技巧
  【持久化专题】比较JPA的EntityManager接口与Hibernate的Ses...
  《大话Java程序设计从入门到精通》写作花絮
  【Java基础编程专题】用内部类实现回调
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。