Jquery-ui draggable

简介:

Jquery ui的draggable插件让某个元素能被鼠标拖拽。

 

draggable和droppable的区别:

draggable只是控制拖拽,如果你要控制拖拽和放下两个动作,你需要使用的是droppable插件

 

draggable有三个事件可以定义回调函数:

start, stop, drag

 

 

这三个事件定义的回调函数可以有两个参数,一个是原始的浏览器定义的事件,另一个是插件定义的事件,假定为ui

ui拥有的属性有:

ui.helper

ui.position

ui.offset

 

 

drag的动作的时候可以设置helper,就是在拖动的时候鼠标旁边显示的提示工具条

draggable的属性有:

disabled: 是否设置此属性可拖拽

addClass:当设置为false的时候,ui-draggable这个class就不会加到上面

appendTo: 指示draggable的时候的helper的container

axis:允许的值是x或者y,限定拖拽只能在x轴变化和只能在y轴变化

connectToSortable:

containment: 拖拽元素所在的容器

cursor: 拖拽的时候鼠标样式

cursorAt: 设置helper相对于鼠标的位置

delay: 设置拖拽动作生效的延迟时间

distance: 设置拖拽动作生效的延迟距离

grad:拖动过程中鼠标移动的单位

helper: helper显示设置

iframeFix:解决拖动过程中与iframe层叠后的事件问题

opacity:设置helper的透明度

refreshPositions: 是否重新计算位置

revert:设置拖拽回复到原始位置

revertDuration:拖拽回复到原始位置的延迟时间

scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标





本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/archive/2012/07/27/2611038.html,如需转载请自行联系原作者

相关文章
|
5月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript
jquery 里面toggle使用
本来使用1.7版本,更改成1.10版本之后,有1个a元素默认隐藏。查找原因之后,原来a元素使用的toggle方法,第一次点击的时候控制A元素显示;第二次点击的时候A元素隐藏。 执行该方法到时候,a元素隐藏。记下来,铭记,以备后患。
58 0
|
JavaScript
animation in Jquery used in ui5
Created by Wang, Jerry, last modified on Nov 02, 2015
animation in Jquery used in ui5
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 Android开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.7 技巧:指定过渡动画
当点击一个会使用AJAX加载页面的内部链接时,jQuery Mobile提供了过渡动画。默认情况下,你会看到页面滑向左侧。jQuery Mobile准备了少量的默认动画供你选择。它们是pop、slidefade、slide、slideup、slidedown、fade和flip。
1703 0