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

Posted wxhhts

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原来这样可以实现鼠标拖拽相关的知识,希望对你有一定的参考价值。

引言: 上次弄了图片放大镜效果(图片放大镜原来是这么回事),当时用到了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效果。

 

以上是关于原来这样可以实现鼠标拖拽的主要内容,如果未能解决你的问题,请参考以下文章

JS拖拽元素原理及实现代码

js原生代码实现鼠标拖拽(超简单)

(原创)[C#] 一步一步自定义拖拽(Drag&Drop)时的鼠标效果:基本原理及基本实现

MFC如何实现鼠标拖拽?

简单的鼠标拖拽效果(原生js实现)

jQuery 通过鼠标摇拽改变div的大小