登录
目录
当前位置： 首页 > 文档资料 > jQuery UI 基础教程 >

jQuery UI API – 可排序小部件（Sortable Widget）

优质
小牛编辑
129浏览
2023-12-01

所属类别

交互（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 zIndexcancel destroy disable enable option refresh refreshPositions serialize toArray widgetactivate beforeStop change create deactivate out over receive remove sort start stop update

选项类型描述默认值
appendTojQuery 或 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"
axisString如果定义了该选项，项目只能在水平或垂直方向上被拖拽。可能的值："x", "y"。

代码实例：

初始化带有指定 axis 选项的 sortable：

$( ".selector" ).sortable({ axis: "x" });
    

在初始化后，获取或设置 axis 选项：

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
    
false
cancelSelector防止从匹配选择器的元素上开始排序。

代码实例：

初始化带有指定 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"
connectWithSelector列表中的项目需被连接的其他 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
containmentElement 或 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
cursorString定义当排序时被显示的光标。

代码实例：

初始化带有指定 cursor 选项的 sortable：

$( ".selector" ).sortable({ cursor: "move" });
    

在初始化后，获取或设置 cursor 选项：

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
    
"auto"
cursorAtObject移动排序元素或助手（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
delayInteger鼠标按下后直到排序开始的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。

代码实例：

初始化带有指定 delay 选项的 sortable：

$( ".selector" ).sortable({ delay: 150 });
    

在初始化后，获取或设置 delay 选项：

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
    
0
disabledBoolean如果设置为 true，则禁用该 sortable。

代码实例：

初始化带有指定 disabled 选项的 sortable：

$( ".selector" ).sortable({ disabled: true });
    

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );
    
false
distanceNumber鼠标按下后排序开始前必须移动的距离，以像素计。如果指定了该选项，排序只有在鼠标拖拽超出指定距离时才会开始。该选项可以用于允许在一个手柄内的元素上点击。

代码实例：

初始化带有指定 distance 选项的 sortable：

$( ".selector" ).sortable({ distance: 5 });
    

在初始化后，获取或设置 distance 选项：

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
    
1
dropOnEmptyBoolean如果为 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
forceHelperSizeBoolean如果为 true，强制助手（helper）有一个尺寸。

代码实例：

初始化带有指定 forceHelperSize 选项的 sortable：

$( ".selector" ).sortable({ forceHelperSize: true });
    

在初始化后，获取或设置 forceHelperSize 选项：

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
    
false
forcePlaceholderSizeBoolean如果为 true，强制占位符（placeholder）有一个尺寸。

代码实例：

初始化带有指定 forcePlaceholderSize 选项的 sortable：

$( ".selector" ).sortable({ forcePlaceholderSize: true });
    

在初始化后，获取或设置 forcePlaceholderSize 选项：

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    
false
gridArray对齐排序元素或助手（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
handleSelector 或 Element如果指定了该选项，则限制在指定的元素上开始排序。

代码实例：

初始化带有指定 handle 选项的 sortable：

$( ".selector" ).sortable({ handle: ".handle" });
    

在初始化后，获取或设置 handle 选项：

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
    
false
helperString 或 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"
itemsSelector指定元素内的哪一个项目应是 sortable。

代码实例：

初始化带有指定 items 选项的 sortable：

$( ".selector" ).sortable({ items: "> li" });
    

在初始化后，获取或设置 items 选项：

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
    
"> *"
opacityNumber当排序时助手（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
placeholderString要应用的 class 名称，否则为白色空白。

代码实例：

初始化带有指定 placeholder 选项的 sortable：

$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });
    

在初始化后，获取或设置 placeholder 选项：

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
    
false
revertBoolean 或 Numbersortable 项目是否使用一个流畅的动画还原到它的新位置。

支持多个类型：

  • Boolean：当设置为 true，该项目将会使用动画，动画使用默认的持续时间。
  • Number：动画的持续时间，以毫秒计。

代码实例：

初始化带有指定 revert 选项的 sortable：

$( ".selector" ).sortable({ revert: true });
    

在初始化后，获取或设置 revert 选项：

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );
    
false
scrollBoolean如果设置为 true，当到达边缘时页面会滚动。

代码实例：

初始化带有指定 scroll 选项的 sortable：

$( ".selector" ).sortable({ scroll: false });
    

在初始化后，获取或设置 scroll 选项：

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );
    
true
scrollSensitivityNumber定义鼠标距离边缘多少距离时开始滚动。

代码实例：

初始化带有指定 scrollSensitivity 选项的 sortable：

$( ".selector" ).sortable({ scrollSensitivity: 10 });
    

在初始化后，获取或设置 scrollSensitivity 选项：

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
    
20
scrollSpeedNumber当鼠标指针获取到在 scrollSensitivity 距离内时，窗体滚动的速度。如果 scroll 选项是 false 则忽略。

代码实例：

初始化带有指定 scrollSpeed 选项的 sortable：

$( ".selector" ).sortable({ scrollSpeed: 40 });
    

在初始化后，获取或设置 scrollSpeed 选项：

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    
20
toleranceString指定用于测试项目被移动时是否覆盖在另一个项目上的模式。可能的值：
  • "intersect"：项目至少 50% 重叠在其他项目上。
  • "pointer"：鼠标指针重叠在其他项目上。

代码实例：

初始化带有指定 tolerance 选项的 sortable：

$( ".selector" ).sortable({ tolerance: "pointer" });
    

在初始化后，获取或设置 tolerance 选项：

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
    
"intersect"
zIndexInteger当被排序时，元素/助手（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>

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn