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

支持多個類型：

• jQuery：一個 jQuery 對象，包含助手（helper）要追加到的元素。
• Element：要追加助手（helper）的元素。
• Selector：一個選擇器，指定哪個元素要追加助手（helper）。
• String：字符串 "parent" 將促使助手（helper）成為 sortable 項(xiàng)目的同級。

代碼實(shí)例：

初始化帶有指定 appendTo 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ appendTo: document.body });
	

在初始化后，獲取或設(shè)置 appendTo 選項(xiàng)：

// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
	

代碼實(shí)例：

初始化帶有指定 axis 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 axis 選項(xiàng)：

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
	

代碼實(shí)例：

初始化帶有指定 cancel 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ cancel: "a,button" });
	

在初始化后，獲取或設(shè)置 cancel 選項(xiàng)：

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
	

代碼實(shí)例：

初始化帶有指定 connectWith 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ connectWith: "#shopping-cart" });
	

在初始化后，獲取或設(shè)置 connectWith 選項(xiàng)：

// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
	

注釋：為 containment 指定的元素必須有一個已計(jì)算的寬度和高度（盡管它不需要顯式）。例如，如果您有 float: left sortable 子元素，并指定了 containment: "parent"，請確保在 sortable/parent 容器上有 float: left ，否則它將有 height: 0，導(dǎo)致未定義的行為。

支持多個類型：

• Element：一個要作為容器使用的元素。
• Selector：一個選擇器，指定一個要作為容器使用的元素。
• String：一個字符串，標(biāo)識一個要作為容器使用的元素?？赡艿闹担?code>"parent"、"document"、"window"。

代碼實(shí)例：

初始化帶有指定 containment 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ containment: "parent" });
	

在初始化后，獲取或設(shè)置 containment 選項(xiàng)：

// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
	

代碼實(shí)例：

初始化帶有指定 cursor 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 cursor 選項(xiàng)：

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
	

代碼實(shí)例：

初始化帶有指定 cursorAt 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 cursorAt 選項(xiàng)：

// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
	

代碼實(shí)例：

初始化帶有指定 delay 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 delay 選項(xiàng)：

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
	

代碼實(shí)例：

初始化帶有指定 disabled 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 disabled 選項(xiàng)：

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );
	

代碼實(shí)例：

初始化帶有指定 distance 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 distance 選項(xiàng)：

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
	

代碼實(shí)例：

初始化帶有指定 dropOnEmpty 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 dropOnEmpty 選項(xiàng)：

// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
	

代碼實(shí)例：

初始化帶有指定 forceHelperSize 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 forceHelperSize 選項(xiàng)：

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
	

代碼實(shí)例：

初始化帶有指定 forcePlaceholderSize 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 forcePlaceholderSize 選項(xiàng)：

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
	

代碼實(shí)例：

初始化帶有指定 grid 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ grid: [ 20, 10 ] });
	

在初始化后，獲取或設(shè)置 grid 選項(xiàng)：

// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
	

代碼實(shí)例：

初始化帶有指定 handle 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 handle 選項(xiàng)：

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
	

支持多個類型：

• String：如果設(shè)置為 "clone"，元素將被克隆，且克隆將被拖拽。
• Function：一個函數(shù)，將返回拖拽時要使用的 DOMElement。函數(shù)接收事件，且元素正被排序。

代碼實(shí)例：

初始化帶有指定 helper 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ helper: "clone" });
	

在初始化后，獲取或設(shè)置 helper 選項(xiàng)：

// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
	

代碼實(shí)例：

初始化帶有指定 items 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 items 選項(xiàng)：

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
	

代碼實(shí)例：

初始化帶有指定 opacity 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ opacity: 0.5 });
	

在初始化后，獲取或設(shè)置 opacity 選項(xiàng)：

// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
	

代碼實(shí)例：

初始化帶有指定 placeholder 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 placeholder 選項(xiàng)：

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
	

支持多個類型：

• Boolean：當(dāng)設(shè)置為 true，該項(xiàng)目將會使用動畫，動畫使用默認(rèn)的持續(xù)時間。
• Number：動畫的持續(xù)時間，以毫秒計(jì)。

代碼實(shí)例：

初始化帶有指定 revert 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 revert 選項(xiàng)：

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );
	

代碼實(shí)例：

初始化帶有指定 scroll 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 scroll 選項(xiàng)：

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );
	

代碼實(shí)例：

初始化帶有指定 scrollSensitivity 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 scrollSensitivity 選項(xiàng)：

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
	

代碼實(shí)例：

初始化帶有指定 scrollSpeed 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 scrollSpeed 選項(xiàng)：

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
	

• "intersect"：項(xiàng)目至少 50% 重疊在其他項(xiàng)目上。
• "pointer"：鼠標(biāo)指針重疊在其他項(xiàng)目上。

代碼實(shí)例：

初始化帶有指定 tolerance 選項(xiàng)的 sortable：

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

在初始化后，獲取或設(shè)置 tolerance 選項(xiàng)：

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
	

代碼實(shí)例：

初始化帶有指定 zIndex 選項(xiàng)的 sortable：

$( ".selector" ).sortable({ zIndex: 9999 });
	

在初始化后，獲取或設(shè)置 zIndex 選項(xiàng)：

// getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
 
// setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 cancel 方法：

$( ".selector" ).sortable( "cancel" );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 destroy 方法：

$( ".selector" ).sortable( "destroy" );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 disable 方法：

$( ".selector" ).sortable( "disable" );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 enable 方法：

$( ".selector" ).sortable( "enable" );
	

• optionName
  類型：String
  描述：要獲取的選項(xiàng)的名稱。

代碼實(shí)例：

調(diào)用該方法：

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用該方法：

var options = $( ".selector" ).sortable( "option" );
	

• optionName
  類型：String
  描述：要設(shè)置的選項(xiàng)的名稱。
• value
  類型：Object
  描述：要為選項(xiàng)設(shè)置的值。

代碼實(shí)例：

調(diào)用該方法：

$( ".selector" ).sortable( "option", "disabled", true );
	

• options
  類型：Object
  描述：要設(shè)置的 option-value 對。

代碼實(shí)例：

調(diào)用該方法：

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

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 refresh 方法：

$( ".selector" ).sortable( "refresh" );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 refreshPositions 方法：

$( ".selector" ).sortable( "refreshPositions" );
	

默認(rèn)情況下，它通過每個項(xiàng)目的 id 進(jìn)行工作，id 格式為 "setname_number"，且它會產(chǎn)生一個形如 "setname[]=number&setname[]=number" 的哈希。

注釋：如果序列化返回一個空的字符串，請確認(rèn) id 屬性包含一個下劃線（_）。形式必須是 "set_number"。例如，一個 id 屬性為 "foo_1"、"foo_5"、"foo_2" 的 3 元素列表將序列化為 "foo[]=1&foo[]=5&foo[]=2"。您可以使用下劃線（_）、等號（=）或連字符（-）來分隔集合和數(shù)字。例如，"foo=1"、"foo-1"、"foo_1" 所有都序列化為 "foo[]=1"。

• options
  類型：Object
  要自定義序列化的選項(xiàng)。
  • key（默認(rèn)值：屬性中分隔符前面的部分）
    類型：String
    描述：把 part1[] 替換為指定的值。
  • attribute（默認(rèn)值："id"）
    類型：String
    描述：值要使用的屬性名稱。
  • expression（默認(rèn)值：/(.+)[-=_](.+)/）
    類型：RegExp
    描述：用于把屬性值分隔為鍵和值兩部分的正則表達(dá)式。

代碼實(shí)例：

調(diào)用 serialize 方法：

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
	

• options
  類型：Object
  要自定義序列化的選項(xiàng)。
  • attribute（默認(rèn)值："id"）
    類型：String
    描述：值要使用的屬性名稱。

代碼實(shí)例：

調(diào)用 toArray 方法：

var sortedIDs = $( ".selector" ).sortable( "toArray" );
	

• 該方法不接受任何參數(shù)。

代碼實(shí)例：

調(diào)用 widget 方法：

var widget = $( ".selector" ).sortable( "widget" );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 activate 回調(diào)的 sortable：

$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortactivate 事件：

$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 beforeStop 回調(diào)的 sortable：

$( ".selector" ).sortable({
beforeStop: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortbeforestop 事件：

$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 change 回調(diào)的 sortable：

$( ".selector" ).sortable({
change: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortchange 事件：

$( ".selector" ).on( "sortchange", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object

注意：ui 對象是空的，這里包含它是為了與其他事件保持一致性。

代碼實(shí)例：

初始化帶有指定 create 回調(diào)的 sortable：

$( ".selector" ).sortable({
create: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortcreate 事件：

$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 deactivate 回調(diào)的 sortable：

$( ".selector" ).sortable({
deactivate: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortdeactivate 事件：

$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
	

注釋：當(dāng)一個 sortable 項(xiàng)目被撤銷時也會觸發(fā)該事件。

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 out 回調(diào)的 sortable：

$( ".selector" ).sortable({
out: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortout 事件：

$( ".selector" ).on( "sortout", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 over 回調(diào)的 sortable：

$( ".selector" ).sortable({
out: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortover 事件：

$( ".selector" ).on( "sortout", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 receive 回調(diào)的 sortable：

$( ".selector" ).sortable({
receive: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortreceive 事件：

$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 remove 回調(diào)的 sortable：

$( ".selector" ).sortable({
remove: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortremove 事件：

$( ".selector" ).on( "sortremove", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 sort 回調(diào)的 sortable：

$( ".selector" ).sortable({
sort: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sort 事件：

$( ".selector" ).on( "sort", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 start 回調(diào)的 sortable：

$( ".selector" ).sortable({
start: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortstart 事件：

$( ".selector" ).on( "sortstart", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 stop 回調(diào)的 sortable：

$( ".selector" ).sortable({
stop: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortstop 事件：

$( ".selector" ).on( "sortstop", function( event, ui ) {} );
	

• event
  類型：Event
• ui
  類型：Object
  • helper
    類型：jQuery
    描述：jQuery 對象，表示被排序的助手（helper）。
  • item
    類型：jQuery
    描述：jQuery 對象，表示當(dāng)前被拖拽的元素。
  • offset
    類型：Object
    描述：助手（helper）的當(dāng)前的絕對位置，表示為 { top, left }。
  • position
    類型：Object
    描述：助手（helper）的當(dāng)前位置，表示為 { top, left }。
  • originalPosition
    類型：Object
    描述：元素的原始位置，表示為 { top, left }。
  • sender
    類型：jQuery
    描述：如果從一個 sortable 移動到另一個 sortable，項(xiàng)目來自的那個 sortable。
  • placeholder
    類型：jQuery
    描述：jQuery 對象，表示被作為占位符使用的元素。

代碼實(shí)例：

初始化帶有指定 update 回調(diào)的 sortable：

$( ".selector" ).sortable({
update: function( event, ui ) {}
});
	

綁定一個事件監(jiān)聽器到 sortupdate 事件：

$( ".selector" ).on( "sortupdate", function( event, ui ) {} );