时间:2021-05-18
本文实例为大家分享了js拖拽效果展示的具体代码,供大家参考,具体内容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #box{ position:absolute; top:50%; left:50%; width:200px; height:200px; background:#ff6600; margin:-100px 0 0 -100px; cursor:move; } </style></head><body> <div id='box'> </div> <script> //JS实现让当前的元素在屏幕居中的位置 var box = document.getElementById('box'); // box.style.top = ((document.documentElement.clientHeight || document.body.clientHeight)-box.offsetHeight)/2 + "px"; // box.style.left = ((document.documentElement.clientWidth || document.body.clientWidth)-box.offsetWidth)/2 + "px"; //拖拽的原理 box.onmousedown = down; function down(e){ e = e || window.event; //记录开始位置的信息 this["strX"] = e.clientX; this["strY"] = e.clientY; this["strL"] = parseFloat(this.style.left); this["strT"] = parseFloat(this.style.top); //给元素绑定移动和抬起的事件 if(this.setCapture){ this.setCapture()//把当前的鼠标和this绑定在一起 this.onmousemove = move; this.onmouseup= up; }else{ var _this = this; document.onmousemove = function(e){ // move(e)//这个里面的this是window move.call(_this,e); } ; document.onmouseup= function(e){ up.call(_this,e); }; } } function move(e){ e = e || window.event; var curL = (e.clientX-this["strX"])+this["strL"]; var curT = (e.clientY-this["strY"])+this["strT"]; //边界判断 var minL = 0,minT = 0,maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight; curL = curL < minL ? minL :(curL > maxL ? maxL : curL); curT = curT < minT ? minT :(curT > maxT ? maxT : curT) this.style.left = curL + "px"; this.style.top = curT + "px"; } function up(e){ if(this.releaseCapture){ this.releaseCapture();//把当前的鼠标和盒子解除绑定 this.onmousemove = null; this.onmouseup= null; }else{ document.onmousemove = null; document.onmouseup= null; //这样绑定的话,move和up绑定的this都是document } } //当鼠标移动过快的时候,我们的鼠标会脱离盒子,导致盒子的mousemove和mouseup事件都移除不到->"鼠标焦点丢失" //在IE和火狐浏览器中,我们用一个方法把盒子和鼠标绑定在一起即可。 //鼠标再快也跑不出去文档:我们把mousemove和mouseup绑定给document </script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下效果图如下-实现了简单的拖拽和缩放功能第一步—简单的拖拽功能//创建一个Mov
JS实现图片拖拽交换效果,供大家参考,具体内容如下听WEB前端javascript企业实战班公开课,用JS实现了图片拖拽交换的目的;感谢老师的讲解。实现要点鼠标
本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下:这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭)特点:①窗口可以
本文实例讲述了JavaScript实现的简单拖拽效果。分享给大家供大家参考。具体实现方法如下:javascript拖拽.test{text-align:cent
本文实例为大家分享了js实现简单图片拖拽效果的具体代码,供大家参考,具体内容如下//图片需要自己导入在当前显示区范围内实现点不到的小方块div{position