jquery easyui拖动成效

2012-09-22

jquery easyui拖动效果!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.

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" 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" 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'));}});

热点排行

Web前端

jquery easyui拖动成效