4
回答
使用jquery实现div拖拽的问题
华为云4核8G,高性能云服务器,免费试用   

自己闲着无聊就用jquery写的DIV拖拽效果,先不说容器问题,在拖拽过程总DIV的移动就不是很流畅,.mouseout()方法也没法使用,代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
	$(document).ready(function(){
							var _x,_y;
							var mouseState = false;							
						$("#foltdiv").mousedown(function(event){
							var _top = $("#foltdiv").css('top');
							var _left = $("#foltdiv").css('left');
							_top = _top.replace(/\p\x/g,"");
							_left = _left.replace(/\p\x/g,"");
							 _x = event.pageX-_top;
							 _y = event.pageY-_left;
							 if(mouseState){mouseState=false;
							 $("#foltdiv").fadeTo(0, 1);}
							 else{mouseState = true;
							 $("#foltdiv").fadeTo(0, 0.5);};
							 
													 })	
						$(document).mouseover(function(event){
							if(mouseState){
								var css_top = event.pageX-_x;
								var css_left = event.pageY-_y;
								$("#foltdiv").css({top:css_top+"px",left:css_left+"px"})
								
								}
							})
					  })
</script>
<style>
	.foltdiv{
		background:#009;
		position:absolute;
		width:100px;
		height:100px;
		top:0px;
		left:0px;}
</style>
</head>

<body>
<div style="width:600px; height:600px; background:#FF0;" > 
<div class="foltdiv" id="foltdiv">
</div>
</div>
</body>
</html>

 求高人指点,怎么改的流畅,还有就是mouseout()这个方法怎么使用(用来修改判断条件用于mouseover中方法的执行)

举报
彭軍
发帖于7年前 4回/2K+阅
顶部