JQUERY EASYUI 可拖放(DRAGGABLE)用法 转载

JAVASCRIPT

JQUERY EASYUI 可拖放(DRAGGABLE)用法

2010 年 3 月 30 日 ADMIN 发表回复

[ad#content]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)的功能了。

演示

EASYUIJAVASCRIPTJQUERY插件

文章导航

上一文章