最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
简单实现js拖拽效果
时间:2017-07-29 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
< 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; /* 不知道宽高的情况下的居中 position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; */ }
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"; //拖拽的原理 /* 当鼠标在盒子上按下的时候,我们开始拖拽(给盒子绑定onmousemove和onmouseup),当鼠标移动的时候,我们计算盒子的最新位置 当鼠标抬起的时候说明拖拽结束了,我们的move和up就没用了,我们再把这两个方法移除 */ 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 > |
-
上一个: nodejs HTTP服务详解
-
下一个: 简单实现js鼠标跟随效果
相关文章
- 简单实现js鼠标跟随效果 07-29
- 超简单的Vue.js环境搭建教程 07-05
- JS实现简单拖拽效果 06-23
- JS实现的简单拖拽功能示例 06-21
- 搭建简单的nodejs http服务器详解 06-13
- js实现简单的二级联动效果 06-12