原来这样可以实现鼠标拖拽
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效果。
以上是关于原来这样可以实现鼠标拖拽的主要内容，如果未能解决你的问题，请参考以下文章