可拖拽内容

最新推荐文章于 2021-08-03 20:11:11 发布

张dasha

最新推荐文章于 2021-08-03 20:11:11 发布

阅读量387

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Elaineone/article/details/52183252

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可拖拽内容</title>
<style>
*{
width:500px;
height:300px;

}
#div1{
width:200px;
height:200px;
border:1px solid red;
background:#999;
position:absolute;
}

#div_title{
width:100%;
height:30px;
background:#333;
}
#div_title:hover{
cursor:move;
}
#div_content{

}
</style>
<script>
window.οnlοad=function(){
var winWidth=document.documentElement.clientWidth; //获取屏幕的宽度：文档的文档元素的客户端宽度
var winHeight=document.documentElement.clientHeight;

var obj= document.getElementById("div1");// 获取div对象
var width=0,height=0;
//console.info(obj);

//取样式表中的样式属性就是获取当前对象的属性
if( typeof window.getComputedStyle!='undefined'){ //w3c中的标准
width=window.getComputedStyle(obj,null)["width"];
height=window.getComputedStyle(obj,null)["height"];
console.info(width+" "+height);

}else if(typeof this.elements[obj].currentStyle!='undefined'){//IE中的标准
width=this.elements[obj].currentStyle["width"];
height=this.elements[obj].currentStyle["height"];
}
obj.style.left=(parseInt(winWidth)-parseInt(width))/2+"px";
obj.style.top=(parseInt(winHeight)-parseInt(height))/2+"px";

var div=document.getElementById("div_title");
//console.info(div);
var isDown=false,currentX=0;currentY=0,nowX=0,nowY=0;

div.onmousedown = function(e){ //记录当前鼠标的位置，然后标记此时用户已经按下鼠标
nowX = parseInt(obj.style.left);
nowY =parseInt(obj.style.top);
isDown = true;
currentX = e.clientX;
currentY = e.clientY;
}

div.onmouseup =function(){//将鼠标按下的标志量为false
isDown = false;
}

div.onmousemove = function(e){
//算偏移量
if( isDown){
obj.style.left = (e.clientX-currentX+nowX)+"px";
obj.style.top = (e.clientY-currentY+nowY)+"px";
}
}
}

</script>
</head>

<body>
<div id="div1">
<div id="div_title">

</div>
<div id="div_content">

</div>
</div>
</body>
</html>