jQuery EasyUI 可拖放(Draggable)用法

jQuery EasyUI可以方便实现很多功能，这里将会介绍一下可拖动（Draggable）的具体用法，jQuery EasyUI不仅可以轻松实现DOM元素的拖动，而且可以使用一些参数让它的使用更加灵活，我们来通过一个小例子来学习一下这些参数：

 

HTML代码如下：

1. <div id="dd" style="width:100px;height:100px;border:1px solid #ccc;">
2.     <div id="title" style="background:#ccc;">title</div>
3. </div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码即可：

1. $('#dd').draggable(options);

其中 options 是可选的参数，可以写，也可以不写，下面再举个写参数的例子，

1. $('#dd').draggable({
2. handle:'#title',
3. disabled:false,
4. edge:1,
5. axis:'h',
6. onStartDrag:function(){
7.  
8. $("<div></div>").appendTo("body").html('start drag:'+$(this).css('left'));
9.  
10. }
11. });

下面介绍一下所有的参数和事件，如下：
参数

参数名 类型 描述 默认值

handle	选择器	定义可以拖动的选择器对象	null
disabled	布尔	定义是否可以拖动，true为停止拖动	false
edge	数字	在距离边缘多少宽度的时候开始拖动，单位是px	0
axis	字符串	定义可以向哪个方向拖动，有v和h两种值 如果设为v就只能垂直拖动，如果设为h，则只能水平拖动	null

事件

事件名 参数 描述

onStartDrag	e	当目标对象开始拖动的时候触发此事件
onDrag	e	当目标对象被拖动的时候触发此事件
onStopDrag	e	当目标对象拖动结束的时候触发此事件

了解这个参数和事件的作用以后，就可以很灵活的使用jQuery EasyUI 可拖放(Draggable)的功能了。