JqueryUI拖拽——“拖”API
来源:互联网 发布:智能手表表盘软件 编辑:程序博客网 时间:2024/05/08 18:00
$( ".selector" ).draggable({ addClasses: false });
在组件初始化之后,读取或设置addClasses
选项
// getter
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
// setter
$( ".selector" ).draggable( "option", "addClasses", false );
appendToType: jQuery or Element or Selector or String
"parent"
- jQuery: 一个含有要被添加拖动组件助手的元素的Jquery对象。
- Element: 要被添加拖动组件助手的元素。
- Selector: 一个用来识别要被添加拖动组件助手的元素的选择器。
- String: 字符串
"parent"
将会使拖动组件助手成为组件的同级元素。
使用appendTo
选项初始化Draggable Widget:
$( ".selector" ).draggable({ appendTo: "body" });
在组件初始化之后,读取或设置appendTo
选项
// getter
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
// setter
$( ".selector" ).draggable( "option", "appendTo", "body" );
axisType: String
false
"x"
, "y"
。使用axis
选项初始化Draggable Widget:
$( ".selector" ).draggable({ axis: "x" });
在组件初始化之后,读取或设置axis
选项:
// getter
var axis = $( ".selector" ).draggable( "option", "axis" );
// setter
$( ".selector" ).draggable( "option", "axis", "x" );
cancelType: Selector
"input,textarea,button,select,option"
使用cancel
选项初始化Draggable Widget:
$( ".selector" ).draggable({ cancel: ".title" });
在组件初始化之后,读取或设置cancel
选项:
// getter
var cancel = $( ".selector" ).draggable( "option", "cancel" );
// setter
$( ".selector" ).draggable( "option", "cancel", ".title" );
connectToSortableType: Selector
false
helper
选项必须被设置为"clone"
。 必须包含jQuery UI 排序组件。使用connectToSortable
选项初始化Draggable Widget:
$( ".selector" ).draggable({ connectToSortable: "#my-sortable" });
在组件初始化之后,读取或设置connectToSortable
选项:
// getter
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
// setter
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" );
containmentType: Selector or Element or String or Array
false
- Selector: 可拖动元素将被置于由选择器指定的第一个元素的起界限作用的盒模型中。如果没有找到任何元素,则不会设置界限。
- Element: 可拖动的元素将包含该元素的边界框。
- String:可选值:
"parent"
,"document"
,"window"
. - Array: 以
[ x1, y1, x2, y2 ]
数组形式定义一个限制区域.
使用containment
选项初始化Draggable Widget:
$( ".selector" ).draggable({ containment: "parent" });
在组件初始化之后,读取或设置containment
选项:
// getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// setter
$( ".selector" ).draggable( "option", "containment", "parent" );
cursorType: String
"auto"
使用cursor
选项初始化Draggable Widget:
$( ".selector" ).draggable({ cursor: "crosshair" });
在组件初始化之后,读取或设置cursor
选项:
// getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
// setter
$( ".selector" ).draggable( "option", "cursor", "crosshair" );
cursorAtType: Object
false
{ top, left, right, bottom }
。使用cursorAt
选项初始化Draggable Widget:
$( ".selector" ).draggable({ cursorAt: { left: 5 } });
在组件初始化之后,读取或设置cursorAt
选项:
// getter
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
// setter
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );
delayType: Number
0
使用delay
选项初始化Draggable Widget:
$( ".selector" ).draggable({ delay: 300 });
在组件初始化之后,读取或设置delay
选项:
// getter
var delay = $( ".selector" ).draggable( "option", "delay" );
// setter
$( ".selector" ).draggable( "option", "delay", 300 );
disabledType: Boolean
false
true
,拖动特效将被禁用。使用disabled
选项初始化Draggable Widget:
$( ".selector" ).draggable({ disabled: true });
在组件初始化之后,读取或设置disabled
选项:
// getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
// setter
$( ".selector" ).draggable( "option", "disabled", true );
distanceType: Number
1
使用distance
选项初始化Draggable Widget:
$( ".selector" ).draggable({ distance: 10 });
在组件初始化之后,读取或设置distance
选项:
// getter
var distance = $( ".selector" ).draggable( "option", "distance" );
// setter
$( ".selector" ).draggable( "option", "distance", 10 );
gridType: Array
false
[ x, y ]
。使用grid
选项初始化Draggable Widget:
$( ".selector" ).draggable({ grid: [ 50, 20 ] });
在组件初始化之后,读取或设置grid
选项:
// getter
var grid = $( ".selector" ).draggable( "option", "grid" );
// setter
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] );
handleType: Selector or Element
false
使用handle
选项初始化Draggable Widget:
$( ".selector" ).draggable({ handle: "h2" });
在组件初始化之后,读取或设置handle
选项:
// getter
var handle = $( ".selector" ).draggable( "option", "handle" );
// setter
$( ".selector" ).draggable( "option", "handle", "h2" );
helperType: String or Function()
"original"
- String:如果值设置为
"clone"
, 那么该元素将会被复制,并且被复制的元素将被拖动。 - Function: 当拖动时,函数将返回一个DOM元素以供使用。
使用helper
选项初始化Draggable Widget:
$( ".selector" ).draggable({ helper: "clone" });
在组件初始化之后,读取或设置helper
选项:
// getter
var helper = $( ".selector" ).draggable( "option", "helper" );
// setter
$( ".selector" ).draggable( "option", "helper", "clone" );
iframeFixType: Boolean or Selector
false
cursorAt
选项搭配使用时或者当鼠标指针可能不在拖动助手元素之上时,该参数非常有用。- Boolean: 当设置为
true
, 透明层将被放置于页面上的所有iframe之上。/li> - Selector: 任何由选择器匹配的iframe将被透明层覆盖。
使用iframeFix
选项初始化Draggable Widget:
$( ".selector" ).draggable({ iframeFix: true });
在组件初始化之后,读取或设置iframeFix
选项:
// getter
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
// setter
$( ".selector" ).draggable( "option", "iframeFix", true );
opacityType: Number
false
使用opacity
选项初始化Draggable Widget:
$( ".selector" ).draggable({ opacity: 0.35 });
在组件初始化之后,读取或设置opacity
选项:
// getter
var opacity = $( ".selector" ).draggable( "option", "opacity" );
// setter
$( ".selector" ).draggable( "option", "opacity", 0.35 );
refreshPositionsType: Boolean
false
true
, 所有的可拖动位置在每次鼠标移动时都会被计算。 注意: 这解决了具有高度动态内容页面的问题,但是却降低了性能。使用refreshPositions
选项初始化Draggable Widget:
$( ".selector" ).draggable({ refreshPositions: true });
在组件初始化之后,读取或设置refreshPositions
选项:
// getter
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
// setter
$( ".selector" ).draggable( "option", "refreshPositions", true );
revertType: Boolean or String
false
- Boolean: 如果设置为
true
,当拖动停止时,元素位置将被重置。 - String: 如果设置为
"invalid"
, 重置仅当拖动没有被放置于一个可放置的对象时才会发生。如果设置为"valid"
, 情况则相反。
使用revert
选项初始化Draggable Widget:
$( ".selector" ).draggable({ revert: true });
在组件初始化之后,读取或设置revert
选项:
// getter
var revert = $( ".selector" ).draggable( "option", "revert" );
// setter
$( ".selector" ).draggable( "option", "revert", true );
revertDurationType: Number
500
revert
选项设置为false
,则忽略(译者注:即被拖到元素不会被重置。)。使用revertDuration
选项初始化Draggable Widget:
$( ".selector" ).draggable({ revertDuration: 200 });
在组件初始化之后,读取或设置revertDuration
选项:
// getter
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
// setter
$( ".selector" ).draggable( "option", "revertDuration", 200 );
scopeType: String
"default"
accept
选项。如果一个一般拖动组件的scope
参数值和一个拖动至容器组件的scope
参数值一样,那么这个一般拖动组件将被接受为拖动至容器组件。使用scope
选项初始化Draggable Widget:
$( ".selector" ).draggable({ scope: "tasks" });
在组件初始化之后,读取或设置scope
选项:
// getter
var scope = $( ".selector" ).draggable( "option", "scope" );
// setter
$( ".selector" ).draggable( "option", "scope", "tasks" );
scrollType: Boolean
true
true
, 当拖动时,div盒模型将自动翻滚。使用scroll
选项初始化Draggable Widget:
$( ".selector" ).draggable({ scroll: false });
在组件初始化之后,读取或设置scroll
选项:
// getter
var scroll = $( ".selector" ).draggable( "option", "scroll" );
// setter
$( ".selector" ).draggable( "option", "scroll", false );
scrollSensitivityType: Number
20
scroll
选项设置为false
,则不滚动。使用scrollSensitivity
选项初始化Draggable Widget:
$( ".selector" ).draggable({ scrollSensitivity: 100 });
在组件初始化之后,读取或设置scrollSensitivity
选项:
// getter
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
// setter
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 );
scrollSpeedType: Number
20
scrollSensitivity
的值时,窗口滚动的速度。如果scroll
选项设置为false
,则该参数无效。使用scrollSpeed
选项初始化Draggable Widget:
$( ".selector" ).draggable({ scrollSpeed: 100 });
在组件初始化之后,读取或设置scrollSpeed
选项:
// getter
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
// setter
$( ".selector" ).draggable( "option", "scrollSpeed", 100 );
snapType: Boolean or Selector
false
- Boolean: 当设置为
true
时, 元素将可以吸附到所有其它可拖动元素上。 - Selector: 确定被吸附元素。
使用snap
选项初始化Draggable Widget:
$( ".selector" ).draggable({ snap: true });
在组件初始化之后,读取或设置snap
选项:
// getter
var snap = $( ".selector" ).draggable( "option", "snap" );
// setter
$( ".selector" ).draggable( "option", "snap", true );
snapModeType: String
"both"
snap
选项设置为false
,则忽略该参数。 可选值: "inner"
, "outer"
, "both"
.使用snapMode
选项初始化Draggable Widget:
$( ".selector" ).draggable({ snapMode: "inner" });
在组件初始化之后,读取或设置snapMode
选项:
// getter
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
// setter
$( ".selector" ).draggable( "option", "snapMode", "inner" );
snapToleranceType: Number
20
snap
选项设置为false
,则忽略该参数。使用snapTolerance
选项初始化Draggable Widget:
$( ".selector" ).draggable({ snapTolerance: 30 });
在组件初始化之后,读取或设置snapTolerance
选项:
// getter
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
// setter
$( ".selector" ).draggable( "option", "snapTolerance", 30 );
stackType: Selector
false
使用stack
选项初始化Draggable Widget:
$( ".selector" ).draggable({ stack: ".products" });
在组件初始化之后,读取或设置stack
选项:
// getter
var stack = $( ".selector" ).draggable( "option", "stack" );
// setter
$( ".selector" ).draggable( "option", "stack", ".products" );
zIndexType: Number
false
使用zIndex
选项初始化Draggable Widget:
$( ".selector" ).draggable({ zIndex: 100 });
在组件初始化之后,读取或设置zIndex
选项:
// getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
// setter
$( ".selector" ).draggable( "option", "zIndex", 100 );
Methods
destroy()
- 这个方法不接受任何参数。
请求destroy方法:
$( ".selector" ).draggable( "destroy" );
disable()
- 这个方法不接受任何参数。
请求disable方法:
$( ".selector" ).draggable( "disable" );
enable()
- 这个方法不接受任何参数。
请求enable方法:
$( ".selector" ).draggable( "enable" );
option( optionName )Returns: Object
optionName
对应的参数值。- optionNameType: String要获取的值所对应的选项的名称。
请求方法:
var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
option()Returns: PlainObject
- 这个方法不接受任何参数。
请求方法:
var options = $( ".selector" ).draggable( "option" );
option( optionName, value )
optionName
指定。- optionNameType: String要设置的选项的名称。
- valueType: Object要为选项设置的参数值。
请求方法:
$( ".selector" ).draggable( "option", "disabled", true );
option( options )
- optionsType: Object要设置的选项与值之间的映射关系。
请求方法:
$( ".selector" ).draggable( "option", { disabled: true } );
widget()Returns: jQuery
jQuery
对象。- 这个方法不接受任何参数。
请求widget方法:
var widget = $( ".selector" ).draggable( "widget" );
Events
create( event, ui )Type: dragcreate
- eventType: Event
- uiType: Object
注意: ui
对象是空的,但是为了与其它元素保持一直,它总是被包含。
使用create回调函数指定事件:
$( ".selector" ).draggable({
create: function( event, ui ) {}
});
绑定一个事件监听器到dragcreate事件:
$( ".selector" ).on( "dragcreate", function( event, ui ) {} );
drag( event, ui )Type: drag
- eventType: Event
- uiType: Object
- helperType: jQuery代表被拖动的元素。
- positionType: Object当前元素的CSS位置,以
{ top, left }
形式给出。 - offsetType: Object当前元素的偏移位置,以
{ top, left }
形式给出。
使用drag回调函数指定事件:
$( ".selector" ).draggable({
drag: function( event, ui ) {}
});
绑定一个事件监听者到drag事件:
$( ".selector" ).on( "drag", function( event, ui ) {} );
start( event, ui )Type: dragstart
- eventType: Event
- uiType: Object
- helperType: jQuery代表被拖动的元素。
- positionType: Object当前元素的CSS位置,以
{ top, left }
形式给出。 - offsetType: Object当前元素的偏移位置,以
{ top, left }
形式给出。
使用start callback specified:
$( ".selector" ).draggable({
start: function( event, ui ) {}
});
拖动事件绑定一个事件监听器:
$( ".selector" ).on( "dragstart", function( event, ui ) {} );
stop( event, ui )Type: dragstop
- eventType: Event
- uiType: Object
- helperType: jQuery代表被拖动的元素。
- positionType: Object当前元素的CSS位置,以
{ top, left }
形式给出。 - offsetType: Object当前元素的偏移位置,以
{ top, left }
形式给出。
使用start回调函数指定事件:
$( ".selector" ).draggable({
stop: function( event, ui ) {}
});
绑定一个事件监听者到dragstart事件:
$( ".selector" ).on( "dragstop", function( event, ui ) {} );
- JqueryUI拖拽——“拖”API
- JqueryUI拖拽——”放“API
- JQueryUI API
- jqueryui 拖拽
- jqueryUI
- [jQueryUI]
- JQueryUI
- JqueryUI
- JQueryUI
- chrome调试工具F12方式javascript(js调试)jqueryui拖拽
- jQueryUI -- 交互事件(拖拽,修改尺寸,交换位置)
- jqueryUI的sortable实现div拖拽排序
- Angularjs 环境下Ztree结合JqueryUI实现拖拽
- 基于jqueryUI和bootstrap实现拖拽排序功能
- jqueryui-tabs
- jQueryUI使用
- jqueryui dialog
- jqueryUI 日历
- 强连通缩点 scc 求最短路
- gradle相关网站以及几个常用网站
- iOS开发:App项目打包上传到App Store的步骤
- java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
- AirbnB uses R to scale data science
- JqueryUI拖拽——“拖”API
- Grails在xx.gsp页面获取配置文件信息
- Bootstrap 常用标签与样式
- JqueryUI拖拽——”放“API
- 筋斗云框架前端:“变脸式应用”的页面路由设计
- C#实例之从题库总随机抽取题号
- 升级python后,iotop出现的问题
- My SkillTree
- Android 沉浸式状态栏 无标题栏 无状态栏 分层式状态栏