非常教程

jQuery UI 教程教程

jQuery UI API – 可排序小部件(Sortable Widget)

jQuery UI API – 可排序小部件(Sortable Widget)

jQuery UI API - 可排序小部件(Sortable Widget)

所属类别

交互(Interactions)

用法

描述:使用鼠标调整列表中或者网格中元素的排序。

版本新增:1.0

依赖:

  • UI 核心(UI Core)
  • 部件库(Widget Factory)
  • 鼠标交互(Mouse Interaction)

注释:jQuery UI 可排序(Sortable)插件让被选元素通过鼠标拖拽进行排序。

注释:为了排序表格行,tbody 必须是可排序的(sortable),而不是 table

快速导航

选项 方法 事件
appendTo
axis
cancel
connectWith
containment
cursor
cursorAt
delay
disabled
distance
dropOnEmpty
forceHelperSize
forcePlaceholderSize
grid
handle
helper
items
opacity
placeholder
revert
scroll
scrollSensitivity
scrollSpeed
tolerance
zIndex
cancel
destroy
disable
enable
option
refresh
refreshPositions
serialize
toArray
widget
activate
beforeStop
change
create
deactivate
out
over
receive
remove
sort
start
stop
update

选项 类型 描述 默认值
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.011

代码实例:

初始化带有指定 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 ) {} );
    

实例

一个简单的 jQuery UI 可排序小部件(Sortable Widget)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可排序小部件(Sortable Widget)演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>$("#sortable").sortable();</script>
 
</body>
</html>

jQuery UI API – 可排序小部件(Sortable Widget)
jQuery UI 教程

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题,可用于创建高度交互的 Web 应用程序。

jQuery UI 教程目录

1.jQuery UI 简介
2.jQuery UI 教程
3.jQuery UI CSS 框架 API
4.jQuery UI 主题
5.jQuery UI 工作原理
6.jQuery UI 如何使用部件库
7.jQuery UI 为什么使用部件库
8.jQuery UI 小部件方法调用
9.jQuery UI 通过部件库扩展小部件
10.jQuery UI 部件库
11.jQuery UI 设计主题
12.jQuery UI API 类别 – UI 核心
13.jQuery UI API 类别 – 主题
14.jQuery UI API 类别 – 选择器
15.jQuery UI API 类别 – 方法
16.jQuery UI API 类别 – 方法重载
17.jQuery UI API 类别 – 交互
18.jQuery UI API 类别 – 特效核心
19.jQuery UI API 类别 – 特效
20.jQuery UI API 文档
21.jQuery UI API – 颜色动画(Color Animation)
22.jQuery UI API – 剪辑特效(Clip Effect)
23.jQuery UI API – 反弹特效(Bounce Effect)
24.jQuery UI API – 百叶窗特效(Blind Effect)
25.jQuery UI API – .addClass()
26.jQuery UI 实例
27.jQuery UI API 类别 – 小部件
28.jQuery UI API 类别 – 实用工具
29.jQuery UI API – 跳动特效(Pulsate Effect)
30.jQuery UI API – 膨胀特效(Puff Effect)
31.jQuery UI API – 突出特效(Highlight Effect)
32.jQuery UI API – .hide()
33.jQuery UI API – 折叠特效(Fold Effect)
34.jQuery UI API – 淡入淡出特效(Fade Effect)
35.jQuery UI API – 爆炸特效(Explode Effect)
36.jQuery UI API – .effect()
37.jQuery UI API – Easings
38.jQuery UI API – 降落特效(Drop Effect)
39.jQuery UI API – 转移特效(Transfer Effect)
40.jQuery UI API – .toggleClass()
41.jQuery UI API – .toggle()
42.jQuery UI API – .switchClass()
43.jQuery UI API – 滑动特效(Slide Effect)
44.jQuery UI API – 尺寸特效(Size Effect)
45.jQuery UI API – .show()
46.jQuery UI API – 震动特效(Shake Effect)
47.jQuery UI API – 缩放特效(Scale Effect)
48.jQuery UI API – .removeClass()
49.jQuery UI API – 可放置小部件(Droppable Widget)
50.jQuery UI API – 可拖拽小部件(Draggable Widget)
51.jQuery UI API – .enableSelection()
52.jQuery UI API – .disableSelection()
53.jQuery UI API – .position()
54.jQuery UI API – .focus()
55.jQuery UI API – 可排序小部件(Sortable Widget)
56.jQuery UI API – 可选择小部件(Selectable Widget)
57.jQuery UI API – 可调整尺寸小部件(Resizable Widget)
58.jQuery UI API – 鼠标交互(Mouse Interaction)
59.jQuery UI API – 堆叠元素(Stacking Elements)
60.jQuery UI API – 图标(Icons)
61.jQuery UI API – CSS 框架(CSS Framework)
62.jQuery UI API – :tabbable Selector
63.jQuery UI API – :focusable Selector
64.jQuery UI API – :data() Selector
65.jQuery UI API – .zIndex()
66.jQuery UI API – .uniqueId()
67.jQuery UI API – .scrollParent()
68.jQuery UI API – .removeUniqueId()
69.jQuery UI API – 插件桥(Widget Plugin Bridge)
70.jQuery UI API – 部件库(Widget Factory)
71.jQuery UI API – jQuery.ui.keyCode
72.jQuery UI API – 滑块部件(Slider Widget)
73.jQuery UI API – 进度条部件(Progressbar Widget)
74.jQuery UI API – 菜单部件(Menu Widget)
75.jQuery UI API – 对话框部件(Dialog Widget)
76.jQuery UI API – 日期选择器部件(Datepicker Widget)
77.jQuery UI API – 按钮部件(Button Widget)
78.jQuery UI API – 自动完成部件(Autocomplete Widget)
79.jQuery UI API – 折叠面板部件(Accordion Widget)
80.jQuery UI API – 工具提示框部件(Tooltip Widget)
81.jQuery UI API – 标签页部件(Tabs Widget)
82.jQuery UI API – 旋转器部件(Spinner Widget)
83.jQuery UI 实例 – 缩放(Resizable)
84.jQuery UI 实例 – 放置(Droppable)
85.jQuery UI 实例 – 拖动(Draggable)
86.jQuery UI 实例 – 滑块(Slider)
87.jQuery UI 实例 – 进度条(Progressbar)
88.jQuery UI 实例 – 菜单(Menu)
89.jQuery UI 实例 – 对话框(Dialog)
90.jQuery UI 实例 – 日期选择器(Datepicker)
91.jQuery UI 实例 – 按钮(Button)
92.jQuery UI 实例 – 自动完成(Autocomplete)
93.jQuery UI 实例 – 折叠面板(Accordion)
94.jQuery UI 实例 – 排序(Sortable)
95.jQuery UI 实例 – 选择(Selectable)
96.jQuery UI 实例 – 切换 Class(Toggle Class)
97.jQuery UI 实例 – 移除 Class(Remove Class)
98.jQuery UI 实例 – 添加 Class(Add Class)
99.jQuery UI 实例 – 切换(Toggle)
100.jQuery UI 实例 – 隐藏(Hide)