使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

Draggable

Document
Native
Basic
Constrain
Snap
Shopping Cart
School Timetable
Plus
Extend

Draggable Document

使用$.fn.draggable.defaults重写默认值对象。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

用法:

通过标签创建一个可拖动的元素。

				
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;">title</div>
</div>
				
			

使用Javascript创建一个可拖动的元素。

				
<div id="dd" style="width:100px;height:100px;"> 
    <div id="title" style="background:#ccc;">title</div> 
</div> 
<script type="text/javascript">
$('#dd').draggable({ 
  handle:'#title' 
}); 
</script>
				
			

属性:

属性名 属性值类型 描述 默认值
proxy string,function 在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,
它将返回一个jquery对象。
下面的例子显示了如何创建一个简单的代理对象。

				
<script type="text/javascript">
$('.dragitem').draggable({
  proxy: function(source){
    var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
    p.html($(source).html()).appendTo('body');
    return p;
  }
});
</script>
				
			
null
revert boolean 如果设置为true,在拖动停止时元素将返回起始位置。 false
cursor string 拖动时的CSS指针样式。 move
deltaX number 被拖动的元素对应于当前光标位置x。 null
deltaY number 被拖动的元素对应于当前光标位置y。 null
handle selector 开始拖动的句柄。 null
disabled boolean 如果设置为true,则停止拖动。 false
edge number 可以在其中拖动的容器的宽度。 0
axis string 定义元素移动的轴向,可用值有:'v'或'h',当没有设置或设置为null时可同时在水平和垂直方向上拖动。 null
delay number 定义元素在多少毫秒后开始移动。(该属性自1.4.2版开始可用) 100

事件:

事件名 参数 描述
onBeforeDrag e 在拖动之前触发,返回false将取消拖动。
onStartDrag e 在目标对象开始被拖动时触发。
onDrag e 在拖动过程中触发,当不能再拖动时返回false。
onStopDrag e 在拖动停止时触发。

方法:

方法名 方法属性 描述
options none 返回属性对象。
proxy none 如果代理属性被设置则返回该拖动代理元素。
enable none 允许拖动。
disable none 禁止拖动。