vue-实例-自定义指令-拖动页面中的元素

一、需求

实现方块在屏幕上任意拖拽的功能。

二、代码实现

自定义指令drag，实现拖动功能。div绑定自定义指令v-drag，实现div的拖动功能。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>拖动页面中的元素</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8   <style>
 9       #hello div{
10           width: 100px;
11           height: 100px;
12           position: absolute;
13       }
14       #hello .div1{
15           background-color: red;
16           top: 0;
17           left: 0;
18       }
19       #hello .div2{
20           background-color: blue;
21           top: 0;
22           right: 0;
23       }
24   </style>
25 </head>
26 <body>
27 
28     <div id="hello">
29         <div class="div1" v-drag>div1</div>
30         <div class="div2" v-drag>div2</div>
31     </div>
32 
33     <script>
34 
35         //自定义全局指令（注意：Vue.directive()这个方法要写在new Vue之前）
36         Vue.directive('drag',function(el){
37             //获取div的位置
38             console.log('获取div的坐标：',el,'div的X坐标',el.offsetLeft,'div的Y坐标',el.offsetTop)
39             //鼠标按下的时候
40             el.onmousedown=function(e){
41                 console.log('获取鼠标按下的位置：','鼠标按下的x坐标',e.clientX,'鼠标按下的y坐标',e.clientY,)
42                 //获取鼠标点击处分别与DIV左边和上边的位置：鼠标位置-div的位置
43                 var disX = e.clientX-el.offsetLeft;
44                 var disY = e.clientY-el.offsetTop;
45                 console.log('鼠标点击处与div左边的距离',disX,'鼠标点击处与div上边的距离',disY)
46 
47                 //鼠标拖动的时候（注意：1.onmousemove事件包含在onmousedown事件里面，表示点击后才移动 2.为了方式鼠标移出div，使用document.omousemove而不是e.onmousemove）
48                 document.onmousemove=function(e){
49                     //动态获取拖动后div的位置：鼠标的位置-disX/disY
50                     var l=e.clientX-disX;
51                     var t=e.clientY-disY;
52                     //鼠标拖动后实时对div定位
53                     el.style.left=l+'px';
54                     el.style.top=t+'px';
55                     console.log('鼠标拖动后div的位置',el.style.left,el.style.top)
56                 }
57 
58                 //鼠标停止移动
59                 document.onmouseup=function(e){
60                     //停止鼠标移动事件
61                     document.onmousemove=null;
62                     //停止鼠标抬起事件
63                     document.onmouseup=null;
64                 }
65             }
66         })
67     
68         //vue实例
69         let vm = new Vue({
70             el:'#hello',
71         });
72     </script>
73 </body>
74 </html>

 

posted @ 2021-08-30 09:55  AnnLing  阅读(260)  评论(0)    收藏  举报