创建一个可拖动的DIV

最新推荐文章于 2022-11-22 14:55:41 发布

weixin_34318956

最新推荐文章于 2022-11-22 14:55:41 发布

阅读量84

点赞数

var drag = function(){  
    var obj = document.getElementById("id");
    var s = obj.style;  
    var b = document.body;   
    var x = event.clientX + b.scrollLeft - s.pixelLeft;   
    var y = event.clientY + b.scrollTop - s.pixelTop; 
   
    var m = function(){  
	  if(event.button == 1){  
	   s.pixelLeft = event.clientX + b.scrollLeft - x;   
	   s.pixelTop = event.clientY + b.scrollTop - y;   
	  }else {
	   document.detachEvent("onmousemove", m);
	  }  
    };  
    document.attachEvent("onmousemove", m);  
    if(!this.z) 
	  this.z = 999;
    s.zIndex = ++this.z;
    event.cancelBubble = true;  
};

然后在div中

另外，DIV中有自己的拖动事件ondrag()，但是下面的函数还有点问题是拖动时有重影。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<style type="text/css">
#myDiv{
	background-color:#01ff32;
	height:200px;
	width:200px;
	top:100px;
	left:300px;
	position:absolute;
}
h1{
	font-size:40px;

}
font{
	color:red;
	
}
</style>
<script>
function drag(event){
	document.getElementById('myDiv').style.top = event.clientY;
	document.getElementById('myDiv').style.left = event.clientX;
	document.getElementById('myDiv').style.cursor='default'
	//event.cancelBubble = true;
	document.getElementById('myDiv')
}
function changeCousor(){
	
}
</script>
<body>
<div id="myDiv" ondrag ="drag(event);" onmousedown = "this.draggable = true; " οnmοuseοver="this.style.cursor='hand'">
	<center>
		<h1><font>drag me</font></h1>
	</center>
</div>
</body>
</html>

红色部分标记出来的部分比较重要。再有就是问题出现的原因应该是坐标的计算有点问题。目前的几个坐标还没有考虑清楚，后面会详细介绍几种坐标！

weixin_34318956

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建一个可拖动的DIV

var drag = function(){ var obj = document.getElementById("id"); var s = obj.style; var b = document.body; var x = event.clientX + b.scrollLeft - s.pixelLeft; var y...
复制链接

扫一扫