js的拖拽效果

最新推荐文章于 2023-11-28 11:58:47 发布

eqyun2012

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量3k

点赞数

分类专栏： JavaScript 文章标签： function xhtml div 浏览器 html

本文链接：https://blog.youkuaiyun.com/eqyun2012/article/details/6755362

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

sunny的js拖拽效果，推荐用这种方法，没有出现bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拖拽</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#win{position:absolute;top:40%;left:33%;width:400px;height:33px;background:#fc0;cursor:move;}
#win1{position:absolute;top:59%;left:59%;width:400px;height:33px;background:#fc0;cursor:move;}

</style>
<script>
window.onload = function ()
{
	 var oWin = document.getElementById("win");
	 var bDrag = false;
	 var disX = disY = 0;
	 oWin.onmousedown = function (event){  
		  bDrag = true;
		  disX = event.clientX - oWin.offsetLeft;
		  disY = event.clientY - oWin.offsetTop;  
		  return false
		 };
 document.onmousemove = function (event){
		  if (!bDrag)
		   return;
		  var iL = event.clientX - disX;
		  var iT = event.clientY - disY;
		  
		  //把图层范围定在浏览器窗口内
		  var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
		  var maxT = document.documentElement.clientHeight - oWin.offsetHeight;  
		  iL = iL < 0 ? 0 : iL;
		  iL = iL > maxL ? maxL : iL;   
		  iT = iT < 0 ? 0 : iT;
		  iT = iT > maxT ? maxT : iT;
		  
		  oWin.style.marginTop = oWin.style.marginLeft = 0;
		  oWin.style.left = iL + "px";
		  oWin.style.top = iT + "px";  
		  return false
		 };
 document.onmouseup = function (){
	  bDrag = false;    
	 };
};
</script>
</head>
<body>
<div id="win">0</div>
</body>
</html>

他的亮点是document监听，我们可以灵活一下，mouseup事件是div的父层监听，就不会出现鼠标移动过快而出现的bug了