简单实现js拖拽效果
程序员文章站
2022-06-24 17:42:08
本文实例为大家分享了js拖拽效果展示的具体代码，供大家参考，具体内容如下
本文实例为大家分享了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;
/*
不知道宽高的情况下的居中
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。