使用jquery实现div拖拽的问题

彭軍 发布于 2011/10/13 14:53
阅读 2K+
收藏 0

自己闲着无聊就用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中方法的执行)

加载中
0
李惟
李惟

给你几个提示:

  1. 不要对拖动对象本身监听鼠标事件,这样会使得你监听事件无法准确定位。
    解决方法:可以把鼠标监听对象放在他的上级对象,或者是直接监听body。

  2. 不要拖动元素本身,如果你不确定拖动对象有多少内容的情况下,不要对对象进行操作,这样难免会卡。
    解决方法:按照你的拖动对象,生成一个新的和对象同等大小空文本元素,对其拖动,在放开鼠标事件触发后,你拖动的对象定位到新生成的对象目标位置。

0
sxgkwei
sxgkwei
大哥,太卡了。。这种效果,找个现成的组件拿来用比较好。
0
scl33
scl33
事件用错了, 没查过手册, 就动手写?
0
李惟
李惟
可以拿新浪微博的拖动弹窗做参考。
返回顶部
顶部