本文实例为大家分享了js拖拽效果展示的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}
html,身体{
宽度:100%;
高度:100%;
}
#箱{
位置:绝对的;
上图:50%;
左:50%;
宽度:200 px;
身高:200 px;
背景:# ff6600;
保证金:-100 px 0 0 -100 px;
光标:移动;/*
不知道宽高的情况下的居中
位置:绝对的;
上图:0;
左:0;
右:0;
底部:0;
保证金:汽车;
*/}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印痹?
& lt;/div>
& lt; script>//JS实现让当前的元素在屏幕居中的位置
var盒=. getelementbyid(盒);//box.style。=((document.documentElement。clientHeight | | document.body.clientHeight) -box.offsetHeight)/2 +“px”;//box.style。=((document.documentElement离开了。clientWidth | | document.body.clientWidth) -box.offsetWidth)/2 +“px”;//拖拽的原理/*
当鼠标在盒子上按下的时候,我们开始拖拽(给盒子绑定onmousemove和onmouseup),当鼠标移动的时候,我们计算盒子的最新位置
当鼠标抬起的时候说明拖拽结束了,我们的举动和起来就没用了,我们再把这两个方法移除
*/盒子。onmousedown=下来;
函数(e) {
e=e | | window.event;//记录开始位置的信息
[" strX "]=e.clientX;
["士的宁"]=e.clientY;
[" strL]=parseFloat (this.style.left);
这[”开始于“]=parseFloat (this.style.top);//给元素绑定移动和抬起的事件
如果(this.setCapture) {
this.setCapture()//把当前的鼠标和这绑定在一起
这一点。onmousemove=移动;
这一点。onmouseup=;
其他}{
var _this=;
文档。onmousemove=function (e) {//移动(e)//这个里面的这是窗口
move.call (_this e);
}
；
文档。onmouseup=function (e) {
up.call (_this e);
};
}
}
函数移动(e) {
e=e | | window.event;
var旋度=(e.clientX-this [" strX "]) + (“strL”);
var curT=(e.clientY-this[“士的宁”])+(“开始于”);//边界判断
var minL=0,薄荷=0,maxL=(document.documentElement。clientWidth | | document.body.clientWidth)——这一点。offsetWidth maxT=(document.documentElement。clientHeight | | document.body.clientHeight)——this.offsetHeight;
旋度=旋度& lt;minL & # 63;minL:(旋度比;maxL & # 63;maxL: curL);
curT=curT & lt;薄荷& # 63;薄荷:(curT比;maxT & # 63;maxT curT):
this.style。左旋度=+“px”;
this.style。顶级=curT +“px”;
}
函数(e) {
如果(this.releaseCapture) {
this.releaseCapture();//把当前的鼠标和盒子解除绑定
这一点。onmousemove=零;
这一点。onmouseup=零;
其他}{
文档。onmousemove=零;
文档。onmouseup=零;//这样绑定的话,移动和起来绑定的这都是文档
}
}//当鼠标移动过快的时候,我们的鼠标会脱离盒子,导致盒子的mousemove和mouseup事件都移除不到→“鼠标焦点丢失”//在IE和火狐浏览器中,我们用一个方法把盒子和鼠标绑定在一起即可。//鼠标再快也跑不出去文档:我们把mousemove和mouseup绑定给文档
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
