jquery easyui拖动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../jquery-1.6.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('.mc').draggable().draggable();
			$('#dd1').draggable({
				onStartDrag:function(){
					$('#info').html('start drag:'+$(this).css('left'));
				}
			});
			$('#dd2').draggable({axis:'v',handle:'#title'});

			$('#mydd').draggable();
		});

		function start(){
			$('#dd1').draggable({disabled:false,edge:5});
		}
		function stop(){
			$('#dd1').draggable({disabled:true});
		}
	</script>
</head>
<body>
	<div id="info" style="top:300px;height:20px;border:1px solid #ccc;">info</div>
	<div style="position:relative;overflow:auto;width:400px;height:200px;border:1px solid #ccc;">
		<div style="width:500px;height:20px;border:1px solid blue;"></div>
		<div id="dd1" class="mc" style="margin:0px;width:100px;height:100px;background:#ccc;border:1px solid red;">
        	
			<a href="#" onclick="start()">start drag1</a><br/>
			<a href="#" onclick="stop()">stop drag</a>
		</div>
	</div>
		<div id="dd2" class="mc" style="margin:10px;width:100px;height:100px;background:#fafafa;border:1px solid red;">
			<div id="title" style="background:#ccc;">title</div>
		</div>
		<div style="height:200px;width:1500px;border:1px solid red;"></div>
		
		
		<div id="mydd" style="width:100px;height:100px;background:red;"></div>
</body>
</html>


上面的代码是jquery easyui demo中的一个例子,把基本的拖动功能做了一个简单的介绍,下面是具体参数的详细说明:
方法:
draggable(options);
options是可选的参数
主要包括下面的属性参数:
handle:定义可以拖动的元素的选择器,例如上述代码中的:
$('#dd2').draggable({axis:'v',handle:'#title'});

只有id为dd2的元素中id为title的元素才能拖动,也就是当鼠标移在title那个元素上方,才会出现可以移动的标识。
disable:是否可以移动,true:不可移动;false:可以移动,默认为false
edge:在距离边缘多少宽度的时候开始拖动,单位是px,默认为0
axis:指定元素拖动的方向,v (vertical)代表垂直,h horizontal 代表水平方向;
$('#dd2').draggable({axis:'v',handle:'#title'});

同样,options还支持事件参数:
onStartDrag:开始拖动是触发的事件;
onDrag:正在拖动时触发的事件;
onStopDrag:停止拖动时触发的事件;
例如:
			$('#dd1').draggable({
				onStartDrag:function(){
					$('#info').html('start drag:'+$(this).css('left'));
				}
			});

你可能感兴趣的:(jquery easyui拖动效果)