码迷,mamicode.com
首页 > 其他好文 > 详细

原来这样可以实现鼠标拖拽

时间:2018-09-26 13:01:32      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:数值   idt   放大镜   dash   ||   cli   为什么   html   事件   

引言: 上次弄了图片放大镜效果(图片放大镜原来是这么回事),当时用到了clientX clientY 后来查询了一下这两个属性,发现居原来还可以用来做简单的拖拽。实现原理与放大镜那里一样,改变left 与top 的数值让 div 移动。

 

 

 1   #box{
 2         width: 100px;
 3         height: 100px;
 4         border: 1px solid  red ;
 5         background: rgba(24,41,254,0.71);
 6         position: absolute;/* 使用绝对定位或者相对定位,使left和top起效达到移动效果。不过用绝对定位可以脱离文档流不影响布局。*/
 7         /*z-index: 9999;*/
 8     }
 9     #box2{
10         width: 100px;
11         height: 100px;
12         border: 2px darkcyan dashed;
13         background: rgba(84,254,80,0.71);
14         left: 200px;
15         position: relative;
16         top: 100px;
17     }
18 </style>
19 <body>
20         <div id="box">
21 
22         </div>
23         <div id="box2">
24 
25         </div>
26 
27         <script>
28             var box=document.getElementById("box");
29 
30             box.onmousedown=function () { // 鼠标按下触发事件
31 
32                 document.onmousemove=function (event) {  // 鼠标移动时获取焦点坐标,并赋予给box ,至于为什么用document不用box,我试过box,拖拽过快会出现box跟不上,
33 
34                     var event=event||window.event
35 
36                     var left=event.clientX; // 获取鼠标焦点坐标
37                     var top=event.clientY;
38 
39                     box.style.left=left+‘px‘; // 焦点赋予给left 改变box 的left 已达到移动
40                     box.style.top=top+‘px‘;
41 
42                  /*  box.style.width=left+‘px‘;// 使用这个还可以改变  box  的大小哦。。。。
43                    box.style.height=top+‘px‘;*/
44                 };
45                 document.onmouseup=function () { // 鼠标放开后停止移动
46                     document.onmousemove=null;
47                     document.onmouseup=null;
48                 }
49             }

 

ps:  demo 演示平台又挂了,暂时不能演示demo x效果。

 

原来这样可以实现鼠标拖拽

标签:数值   idt   放大镜   dash   ||   cli   为什么   html   事件   

原文地址:https://www.cnblogs.com/wxhhts/p/9706170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!