选项 |
类型 |
描述 |
默认值 |
appendTo |
jQuery 或 Element 或 Selector 或 String |
当拖拽时,通过鼠标移动的助手被追加到哪里(例如,解决 overlap/zIndex 问题)。
支持多个类型:
- jQuery:一个 jQuery 对象,包含助手(helper)要追加到的元素。
- Element:要追加助手(helper)的元素。
- Selector:一个选择器,指定哪个元素要追加助手(helper)。
- String:字符串
"parent" 将促使助手(helper)成为 sortable 项目的同级。
代码实例:
初始化带有指定 appendTo 选项的 sortable:
$( ".selector" ).sortable({ appendTo: document.body });
在初始化后,获取或设置 appendTo 选项:
// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
|
"parent" |
axis |
String |
如果定义了该选项,项目只能在水平或垂直方向上被拖拽。可能的值:"x" , "y" 。
代码实例:
初始化带有指定 axis 选项的 sortable:
$( ".selector" ).sortable({ axis: "x" });
在初始化后,获取或设置 axis 选项:
// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
|
false |
cancel |
Selector |
防止从匹配选择器的元素上开始排序。
代码实例:
初始化带有指定 cancel 选项的 sortable:
$( ".selector" ).sortable({ cancel: "a,button" });
在初始化后,获取或设置 cancel 选项:
// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
|
"input, textarea, button, select, option" |
connectWith |
Selector |
列表中的项目需被连接的其他 sortable 元素的选择器。这是一个单向关系,如果您想要项目被双向连接,必须在两个 sortable 元素上都设置 connectWith 选项。
代码实例:
初始化带有指定 connectWith 选项的 sortable:
$( ".selector" ).sortable({ connectWith: "#shopping-cart" });
在初始化后,获取或设置 connectWith 选项:
// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
|
false |
containment |
Element 或 Selector 或 String |
定义拖拽时,sortable 项目被约束的边界。
注释:为 containment 指定的元素必须有一个已计算的宽度和高度(尽管它不需要显式)。例如,如果您有 float: left sortable 子元素,并指定了 containment: "parent" ,请确保在 sortable/parent 容器上有 float: left ,否则它将有 height: 0 ,导致未定义的行为。
支持多个类型:
- Element:一个要作为容器使用的元素。
- Selector:一个选择器,指定一个要作为容器使用的元素。
- String:一个字符串,标识一个要作为容器使用的元素。可能的值:
"parent" 、"document" 、"window" 。
代码实例:
初始化带有指定 containment 选项的 sortable:
$( ".selector" ).sortable({ containment: "parent" });
在初始化后,获取或设置 containment 选项:
// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
|
false |
cursor |
String |
定义当排序时被显示的光标。
代码实例:
初始化带有指定 cursor 选项的 sortable:
$( ".selector" ).sortable({ cursor: "move" });
在初始化后,获取或设置 cursor 选项:
// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
|
"auto" |
cursorAt |
Object |
移动排序元素或助手(helper),这样光标总是出现,以便从相同的位置进行拖拽。坐标可通过一个或两个键的组合成一个哈希给出:{ top, left, right, bottom } 。
代码实例:
初始化带有指定 cursorAt 选项的 sortable:
$( ".selector" ).sortable({ cursorAt: { left: 5 } });
在初始化后,获取或设置 cursorAt 选项:
// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
|
false |
delay |
Integer |
鼠标按下后直到排序开始的时间,以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。
代码实例:
初始化带有指定 delay 选项的 sortable:
$( ".selector" ).sortable({ delay: 150 });
在初始化后,获取或设置 delay 选项:
// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
|
0 |
disabled |
Boolean |
如果设置为 true ,则禁用该 sortable。
代码实例:
初始化带有指定 disabled 选项的 sortable:
$( ".selector" ).sortable({ disabled: true });
在初始化后,获取或设置 disabled 选项:
// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
// setter
$( ".selector" ).sortable( "option", "disabled", true );
|
false |
distance |
Number |
鼠标按下后排序开始前必须移动的距离,以像素计。如果指定了该选项,排序只有在鼠标拖拽超出指定距离时才会开始。该选项可以用于允许在一个手柄内的元素上点击。
代码实例:
初始化带有指定 distance 选项的 sortable:
$( ".selector" ).sortable({ distance: 5 });
在初始化后,获取或设置 distance 选项:
// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
|
1 |
dropOnEmpty |
Boolean |
如果为 false ,从该 sortable 的项目不能被放置在空连接的 sortable 上(请查看 connectWith 选项)。
代码实例:
初始化带有指定 dropOnEmpty 选项的 sortable:
$( ".selector" ).sortable({ dropOnEmpty: false });
在初始化后,获取或设置 dropOnEmpty 选项:
// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
|
true |
forceHelperSize |
Boolean |
如果为 true ,强制助手(helper)有一个尺寸。
代码实例:
初始化带有指定 forceHelperSize 选项的 sortable:
$( ".selector" ).sortable({ forceHelperSize: true });
在初始化后,获取或设置 forceHelperSize 选项:
// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
|
false |
forcePlaceholderSize |
Boolean |
如果为 true ,强制占位符(placeholder)有一个尺寸。
代码实例:
初始化带有指定 forcePlaceholderSize 选项的 sortable:
$( ".selector" ).sortable({ forcePlaceholderSize: true });
在初始化后,获取或设置 forcePlaceholderSize 选项:
// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
|
false |
grid |
Array |
对齐排序元素或助手(helper)到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ] 。
代码实例:
初始化带有指定 grid 选项的 sortable:
$( ".selector" ).sortable({ grid: [ 20, 10 ] });
在初始化后,获取或设置 grid 选项:
// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
|
false |
handle |
Selector 或 Element |
如果指定了该选项,则限制在指定的元素上开始排序。
代码实例:
初始化带有指定 handle 选项的 sortable:
$( ".selector" ).sortable({ handle: ".handle" });
在初始化后,获取或设置 handle 选项:
// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
|
false |
helper |
String 或 Function() |
允许一个 helper 元素用于拖拽显示。
支持多个类型:
- String:如果设置为
"clone" ,元素将被克隆,且克隆将被拖拽。
- Function:一个函数,将返回拖拽时要使用的 DOMElement。函数接收事件,且元素正被排序。
代码实例:
初始化带有指定 helper 选项的 sortable:
$( ".selector" ).sortable({ helper: "clone" });
在初始化后,获取或设置 helper 选项:
// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
|
"original" |
items |
Selector |
指定元素内的哪一个项目应是 sortable。
代码实例:
初始化带有指定 items 选项的 sortable:
$( ".selector" ).sortable({ items: "> li" });
在初始化后,获取或设置 items 选项:
// getter
var items = $( ".selector" ).sortable( "option", "items" );
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
|
"> *" |
opacity |
Number |
当排序时助手(helper)的不透明度。从 0.01 到 1 。
代码实例:
初始化带有指定 opacity 选项的 sortable:
$( ".selector" ).sortable({ opacity: 0.5 });
在初始化后,获取或设置 opacity 选项:
// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
|
false |
placeholder |
String |
要应用的 class 名称,否则为白色空白。
代码实例:
初始化带有指定 placeholder 选项的 sortable:
$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });
在初始化后,获取或设置 placeholder 选项:
// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
|
false |
revert |
Boolean 或 Number |
sortable 项目是否使用一个流畅的动画还原到它的新位置。
支持多个类型:
- Boolean:当设置为
true ,该项目将会使用动画,动画使用默认的持续时间。
- Number:动画的持续时间,以毫秒计。
代码实例:
初始化带有指定 revert 选项的 sortable:
$( ".selector" ).sortable({ revert: true });
在初始化后,获取或设置 revert 选项:
// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
// setter
$( ".selector" ).sortable( "option", "revert", true );
|
false |
scroll |
Boolean |
如果设置为 true ,当到达边缘时页面会滚动。
代码实例:
初始化带有指定 scroll 选项的 sortable:
$( ".selector" ).sortable({ scroll: false });
在初始化后,获取或设置 scroll 选项:
// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
// setter
$( ".selector" ).sortable( "option", "scroll", false );
|
true |
scrollSensitivity |
Number |
定义鼠标距离边缘多少距离时开始滚动。
代码实例:
初始化带有指定 scrollSensitivity 选项的 sortable:
$( ".selector" ).sortable({ scrollSensitivity: 10 });
在初始化后,获取或设置 scrollSensitivity 选项:
// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
|
20 |
scrollSpeed |
Number |
当鼠标指针获取到在 scrollSensitivity 距离内时,窗体滚动的速度。如果 scroll 选项是 false 则忽略。
代码实例:
初始化带有指定 scrollSpeed 选项的 sortable:
$( ".selector" ).sortable({ scrollSpeed: 40 });
在初始化后,获取或设置 scrollSpeed 选项:
// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
|
20 |
tolerance |
String |
指定用于测试项目被移动时是否覆盖在另一个项目上的模式。可能的值:
"intersect" :项目至少 50% 重叠在其他项目上。
"pointer" :鼠标指针重叠在其他项目上。
代码实例:
初始化带有指定 tolerance 选项的 sortable:
$( ".selector" ).sortable({ tolerance: "pointer" });
在初始化后,获取或设置 tolerance 选项:
// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
|
"intersect" |
zIndex |
Integer |
当被排序时,元素/助手(helper)的 Z-index。
代码实例:
初始化带有指定 zIndex 选项的 sortable:
$( ".selector" ).sortable({ zIndex: 9999 });
在初始化后,获取或设置 zIndex 选项:
// getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
// setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );
|
1000 |
方法 |
返回 |
描述 |
cancel() |
jQuery (plugin only) |
当前排序开始时,取消一个在当前 sortable 中的改变,且恢复到之前的状态。在 stop 和 receive 回调函数中非常有用。
代码实例:
调用 cancel 方法:
$( ".selector" ).sortable( "cancel" );
|
destroy() |
jQuery (plugin only) |
完全移除 sortable 功能。这会把元素返回到它的预初始化状态。
代码实例:
调用 destroy 方法:
$( ".selector" ).sortable( "destroy" );
|
disable() |
jQuery (plugin only) |
禁用 sortable。
代码实例:
调用 disable 方法:
$( ".selector" ).sortable( "disable" );
|
enable() |
jQuery (plugin only) |
启用 sortable。
代码实例:
调用 enable 方法:
$( ".selector" ).sortable( "enable" );
|
option( optionName ) |
Object |
获取当前与指定的 optionName 关联的值。
- optionName
类型:String
描述:要获取的选项的名称。
代码实例:
调用该方法:
var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
|
option() |
PlainObject |
获取一个包含键/值对的对象,键/值对表示当前 draggable 选项哈希。
代码实例:
调用该方法:
var options = $( ".selector" ).sortable( "option" );
|
option( optionName, value ) |
jQuery (plugin only) |
设置与指定的 optionName 关联的 sortable 选项的值。
- optionName
类型:String
描述:要设置的选项的名称。
- value
类型:Object
描述:要为选项设置的值。
代码实例:
调用该方法:
$( ".selector" ).sortable( "option", "disabled", true );
|
option( options ) |
jQuery (plugin only) |
为 sortable 设置一个或多个选项。
- options
类型:Object
描述:要设置的 option-value 对。
代码实例:
调用该方法:
$( ".selector" ).sortable( "option", { disabled: true } );
|
refresh() |
jQuery (plugin only) |
刷新 sortable 项目。触发所有 sortable 项目重新加载,导致新的项目被认可。
代码实例:
调用 refresh 方法:
$( ".selector" ).sortable( "refresh" );
|
refreshPositions() |
jQuery (plugin only) |
刷新 sortable 项目的缓存位置。调用该方法刷新所有 sortable 的已缓存的项目位置。
代码实例:
调用 refreshPositions 方法:
$( ".selector" ).sortable( "refreshPositions" );
|
serialize( options ) |
String |
序列化 sortable 的项目 id 为一个 form/ajax 可提交的字符串。调用该方法会产生一个可被追加到任何 url 中的哈希,以便简单地把一个新的项目顺序提交回服务器。
默认情况下,它通过每个项目的 id 进行工作,id 格式为 "setname_number" ,且它会产生一个形如 "setname[]=number&setname[]=number" 的哈希。
注释:如果序列化返回一个空的字符串,请确认 id 属性包含一个下划线(_)。形式必须是 "set_number" 。例如,一个 id 属性为 "foo_1" 、"foo_5" 、"foo_2" 的 3 元素列表将序列化为 "foo[]=1&foo[]=5&foo[]=2" 。您可以使用下划线(_)、等号(=)或连字符(-)来分隔集合和数字。例如,"foo=1" 、"foo-1" 、"foo_1" 所有都序列化为 "foo[]=1" 。
- options
类型:Object
要自定义序列化的选项。
- key(默认值:
属性中分隔符前面的部分 )
类型:String
描述:把 part1[] 替换为指定的值。
- attribute(默认值:
"id" )
类型:String
描述:值要使用的属性名称。
- expression(默认值:
/(.+)[-=_](.+)/ )
类型:RegExp
描述:用于把属性值分隔为键和值两部分的正则表达式。
代码实例:
调用 serialize 方法:
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
|
toArray( options ) |
Array |
序列化 sortable 的项目 id 为一个字符串的数组。
- options
类型:Object
要自定义序列化的选项。
- attribute(默认值:
"id" )
类型:String
描述:值要使用的属性名称。
代码实例:
调用 toArray 方法:
var sortedIDs = $( ".selector" ).sortable( "toArray" );
|
widget() |
jQuery |
返回一个包含 sortable 元素的 jQuery 对象。
代码实例:
调用 widget 方法:
var widget = $( ".selector" ).sortable( "widget" );
|
事件 |
类型 |
描述 |
activate( event, ui ) |
sortactivate |
当使用被连接列表时触发该事件,每个被连接列表在拖拽开始时接收它。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 activate 回调的 sortable:
$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
绑定一个事件监听器到 sortactivate 事件:
$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
|
beforeStop( event, ui ) |
sortbeforestop |
当排序停止时触发该事件,除了当占位符(placeholder)/助手(helper)仍然可用时。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 beforeStop 回调的 sortable:
$( ".selector" ).sortable({
beforeStop: function( event, ui ) {}
});
绑定一个事件监听器到 sortbeforestop 事件:
$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
|
change( event, ui ) |
sortchange |
在排序期间触发该事件,除了当 DOM 位置改变时。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 change 回调的 sortable:
$( ".selector" ).sortable({
change: function( event, ui ) {}
});
绑定一个事件监听器到 sortchange 事件:
$( ".selector" ).on( "sortchange", function( event, ui ) {} );
|
create( event, ui ) |
sortcreate |
当 droppable 被创建时触发。
- event
类型:Event
- ui
类型:Object
注意:ui 对象是空的,这里包含它是为了与其他事件保持一致性。
代码实例:
初始化带有指定 create 回调的 sortable:
$( ".selector" ).sortable({
create: function( event, ui ) {}
});
绑定一个事件监听器到 sortcreate 事件:
$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
|
deactivate( event, ui ) |
sortdeactivate |
当排序停止时触发该事件,该事件传播到所有可能的连接列表。。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 deactivate 回调的 sortable:
$( ".selector" ).sortable({
deactivate: function( event, ui ) {}
});
绑定一个事件监听器到 sortdeactivate 事件:
$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
|
out( event, ui ) |
sortout |
当一个 sortable 项目从一个 sortable 列表移除时触发该事件。
注释:当一个 sortable 项目被撤销时也会触发该事件。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 out 回调的 sortable:
$( ".selector" ).sortable({
out: function( event, ui ) {}
});
绑定一个事件监听器到 sortout 事件:
$( ".selector" ).on( "sortout", function( event, ui ) {} );
|
over( event, ui ) |
sortover |
当一个 sortable 项目移动到一个 sortable 列表时触发该事件。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 over 回调的 sortable:
$( ".selector" ).sortable({
out: function( event, ui ) {}
});
绑定一个事件监听器到 sortover 事件:
$( ".selector" ).on( "sortout", function( event, ui ) {} );
|
receive( event, ui ) |
sortreceive |
当来自一个连接的 sortable 列表的一个项目被放置到另一个列表时触发该事件。后者是事件目标。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 receive 回调的 sortable:
$( ".selector" ).sortable({
receive: function( event, ui ) {}
});
绑定一个事件监听器到 sortreceive 事件:
$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
|
remove( event, ui ) |
sortremove |
当来自一个连接的 sortable 列表的一个项目被放置到另一个列表时触发该事件。前者是事件目标。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 remove 回调的 sortable:
$( ".selector" ).sortable({
remove: function( event, ui ) {}
});
绑定一个事件监听器到 sortremove 事件:
$( ".selector" ).on( "sortremove", function( event, ui ) {} );
|
sort( event, ui ) |
sort |
在排序期间触发该事件。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 sort 回调的 sortable:
$( ".selector" ).sortable({
sort: function( event, ui ) {}
});
绑定一个事件监听器到 sort 事件:
$( ".selector" ).on( "sort", function( event, ui ) {} );
|
start( event, ui ) |
sortstart |
当排序开始时触发该事件。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 start 回调的 sortable:
$( ".selector" ).sortable({
start: function( event, ui ) {}
});
绑定一个事件监听器到 sortstart 事件:
$( ".selector" ).on( "sortstart", function( event, ui ) {} );
|
stop( event, ui ) |
sortstop |
当排序停止时触发该事件。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 stop 回调的 sortable:
$( ".selector" ).sortable({
stop: function( event, ui ) {}
});
绑定一个事件监听器到 sortstop 事件:
$( ".selector" ).on( "sortstop", function( event, ui ) {} );
|
update( event, ui ) |
sortupdate |
当用户停止排序且 DOM 位置改变时触发该事件。
- event
类型:Event
- ui
类型:Object
- helper
类型:jQuery
描述:jQuery 对象,表示被排序的助手(helper)。
- item
类型:jQuery
描述:jQuery 对象,表示当前被拖拽的元素。
- offset
类型:Object
描述:助手(helper)的当前的绝对位置,表示为 { top, left } 。
- position
类型:Object
描述:助手(helper)的当前位置,表示为 { top, left } 。
- originalPosition
类型:Object
描述:元素的原始位置,表示为 { top, left } 。
- sender
类型:jQuery
描述:如果从一个 sortable 移动到另一个 sortable,项目来自的那个 sortable。
- placeholder
类型:jQuery
描述:jQuery 对象,表示被作为占位符使用的元素。
代码实例:
初始化带有指定 update 回调的 sortable:
$( ".selector" ).sortable({
update: function( event, ui ) {}
});
绑定一个事件监听器到 sortupdate 事件:
$( ".selector" ).on( "sortupdate", function( event, ui ) {} );
|