·概述

Selectable外掛允許使用者對指定的元素進行選中的動作。此外還支援按住Ctrl鍵單擊或拖拽選擇多個元素。

官方示例地址：http://jqueryui.com/demos/sortable/

所有的事件回撥函式都有兩個引數：event和ui，瀏覽器自有event物件，和經過封裝的ui物件

ui.helper - 表示sortable元素的JQuery物件，通常是當前元素的克隆物件

ui.position - 表示相對當前物件，滑鼠的座標值物件{top,left}

ui.offset - 表示相對於當前頁面，滑鼠的座標值物件{top,left}

ui.item - 表示當前拖拽的元素

ui.placeholder - 佔位符（如果有定義的話）

ui.sender - 當前拖拽元素的所屬sortable物件（僅當元素是從另一個sortable物件傳遞過來時有用）

·引數（引數名 : 引數型別 : 預設值）

appendTo : String : 'parent'

  Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

  初始：$('.selector').sortable({ appendTo: 'body' });

  獲取：var appendTo = $('.selector').sortable('option', 'appendTo');

  設定：$('.selector').sortable('option', 'appendTo', 'body');

axis : String : false

  如果有設定，則元素僅能橫向或縱向拖動。可選值：'x', 'y'

  初始：$('.selector').sortable({ axis: 'x' });

  獲取：var axis = $('.selector').sortable('option', 'axis');

  設定：$('.selector').sortable('option', 'axis', 'x');

cancel : Selector : ':input,button'

  阻止排序動作在匹配的元素上發生。

  初始：$('.selector').sortable({ cancel: 'button' });

  獲取：var cancel = $('.selector').sortable('option', 'cancel');

  設定：$('.selector').sortable('option', 'cancel', 'button');

connectWith : Selector : false

  允許sortable物件連線另一個sortable物件，可將item元素拖拽到另一箇中。

  初始：$('.selector').sortable({ connectWith: '.otherlist' });

  獲取：var connectWith = $('.selector').sortable('option', 'connectWith');

  設定：$('.selector').sortable('option', 'connectWith', '.otherlist');

containment : Element, String, Selector : false

  約束排序動作只能在一個指定的範圍內發生。可選值：DOM物件, 'parent', 'document', 'window', 或jQuery物件

  初始：$('.selector').sortable({ containment: 'parent' });

  獲取：var containment = $('.selector').sortable('option', 'containment');

  設定：$('.selector').sortable('option', 'containment', 'parent');

cursor : String : 'auto'

  定義在開始排序動作時，如果的樣式。

  初始：$('.selector').sortable({ cursor: 'crosshair' });

  獲取：var cursor = $('.selector').sortable('option', 'cursor');

  設定：$('.selector').sortable('option', 'cursor', 'crosshair');

cursorAt : Object : false

  當開始移動時，滑鼠定位在的某個位置上（最多兩個方向）。可選值：{ top, left, right, bottom }.

  初始：$('.selector').sortable({ cursorAt: 'top' });

  獲取：var cursorAt = $('.selector').sortable('option', 'cursorAt');

  設定：$('.selector').sortable('option', 'cursorAt', 'top');

delay : Integer : 0

  以毫秒為單位，設定延遲多久才啟用排序動作。此引數可防止誤點選。

  初始：$('.selector').sortable({ delay: 500 });

  獲取：var delay = $('.selector').sortable('option', 'delay');

  設定：$('.selector').sortable('option', 'delay', 500);

distance : Integer : 1

  決定至少要在元素上面拖動多少畫素後，才正式觸發排序動作。

  初始：$('.selector').sortable({ distance: 30 });

  獲取：var distance = $('.selector').sortable('option', 'distance');

  設定：$('.selector').sortable('option', 'distance', 30);

dropOnEmpty : Boolean : true

  是否允許拖拽到一個空的sortable物件中。

  初始：$('.selector').sortable({ dropOnEmpty: false });

  獲取：var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');

  設定：$('.selector').sortable('option', 'dropOnEmpty', false);

forceHelperSize : Boolean : false

  If true, forces the helper to have a size.

  初始：$('.selector').sortable({ forceHelperSize: true });

  獲取：var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');

  設定：$('.selector').sortable('option', 'forceHelperSize', true);

forcePlaceholderSize : Boolean : false

  If true, forces the placeholder to have a size.

  初始：$('.selector').sortable({ forcePlaceholderSize: true });

  獲取：var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');

  設定：$('.selector').sortable('option', 'forcePlaceholderSize', true);

grid : Array : false

  將排序物件的item元素視為一個格子處理，每次移動都按一個格子大小移動，陣列值：[x,y]

  初始：$('.selector').sortable({ grid: [50, 20] });

  獲取：var grid = $('.selector').sortable('option', 'grid');

  設定：$('.selector').sortable('option', 'grid', [50, 20]);

handle : Selector, Element : false

  限制排序的動作只能在item元素中的某個元素開始。

  初始：$('.selector').sortable({ handle: 'h2' });

  獲取：var handle = $('.selector').sortable('option', 'handle');

  設定：$('.selector').sortable('option', 'handle', 'h2');

helper : String, Function : 'original'

  設定是否在拖拽元素時，顯示一個輔助的元素。可選值：'original', 'clone'

  初始：$('.selector').sortable({ helper: 'clone' });

  獲取：var helper = $('.selector').sortable('option', 'helper');

  設定：$('.selector').sortable('option', 'helper', 'clone');

items : Selector : '> *'

  指定在排序物件中，哪些元素是可以進行拖拽排序的。

  初始：$('.selector').sortable({ items: 'li' });

  獲取：var items = $('.selector').sortable('option', 'items');

  設定：$('.selector').sortable('option', 'items', 'li');

opacity : Float : false

  定義當排序時，輔助元素(helper)顯示的透明度。

  初始：$('.selector').sortable({ opacity: 0.6 });

  獲取：var opacity = $('.selector').sortable('option', 'opacity');

  設定：$('.selector').sortable('option', 'opacity', 0.6);

placeholderType: StringDefault: false

  設定當排序動作發生時，空白佔位符的CSS樣式。

  初始：$('.selector').sortable({ placeholder: 'ui-state-highlight' });

  獲取：var placeholder = $('.selector').sortable('option', 'placeholder');

  設定：$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');

revert : Boolean : false

  如果設定成true，則被拖拽的元素在返回新位置時，會有一個動畫效果。

  初始：$('.selector').sortable({ revert: true });

  獲取：var revert = $('.selector').sortable('option', 'revert');

  設定：$('.selector').sortable('option', 'revert', true);

scroll : Boolean : true

  如果設定成true，則元素被拖動到頁面邊緣時，會自動滾動。

  初始：$('.selector').sortable({ scroll: false });

  獲取：var scroll = $('.selector').sortable('option', 'scroll');

  設定：$('.selector').sortable('option', 'scroll', false);

scrollSensitivity : Integer : 20

  設定當元素移動至邊緣多少畫素時，便開始滾動頁面。

  初始：$('.selector').sortable({ scrollSensitivity: 40 });

  獲取：var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');

  設定：$('.selector').sortable('option', 'scrollSensitivity', 40);

scrollSpeed : Integer : 20

  設定頁面滾動的速度。

  初始：$('.selector').sortable({ scrollSpeed: 40 });

  獲取：var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');

  設定：$('.selector').sortable('option', 'scrollSpeed', 40);

tolerance : String : 'intersect'

  設定當拖動元素越過其它元素多少時便對元素進行重新排序。可選值：'intersect', 'pointer'

  intersect：至少重疊50%

  pointer：滑鼠指標重疊元素

  初始：$('.selector').sortable({ tolerance: 'pointer' });

  獲取：var tolerance = $('.selector').sortable('option', 'tolerance');

  設定：$('.selector').sortable('option', 'tolerance', 'pointer');

zIndex : Integer : 1000

  設定在排序動作發生時，元素的z-index值。

  初始：$('.selector').sortable({ zIndex: 5 });

  獲取：var zIndex = $('.selector').sortable('option', 'zIndex');

  設定：$('.selector').sortable('option', 'zIndex', 5);

·事件

start

  當排序動作開始時觸發此事件。

  定義：$('.selector').sortable({ start: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortstart', function(event, ui) { ... });

sort

  當元素髮生排序時觸發此事件。

  定義：$('.selector').sortable({ sort: function(event, ui) { ... } });

  繫結：$('.selector').bind('sort', function(event, ui) { ... });

change

  當元素髮生排序且座標已發生改變時觸發此事件。

  定義：$('.selector').sortable({ change: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortchange', function(event, ui) { ... });

beforeStop

  當排序動作結束之前觸發此事件。此時佔位符元素和輔助元素仍有效。

  定義：$('.selector').sortable({ beforeStop: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortbeforeStop', function(event, ui) { ... });

stop

  當排序動作結束時觸發此事件。

  定義：$('.selector').sortable({ stop: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortstop', function(event, ui) { ... });

update

  當排序動作結束時且元素座標已經發生改變時觸發此事件。

  定義：$('.selector').sortable({ update: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortupdate', function(event, ui) { ... });

receive

  當一個已連線的sortable物件接收到另一個sortable物件的元素後觸發此事件。

  定義：$('.selector').sortable({ receive: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortreceive', function(event, ui) { ... });

over

  當一個元素拖拽移入另一個sortable物件後觸發此事件。

  定義：$('.selector').sortable({ over: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortover', function(event, ui) { ... });

out

  當一個元素拖拽移出sortable物件移出並進入另一個sortable物件後觸發此事件。

  定義：$('.selector').sortable({ out: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortout', function(event, ui) { ... });

activate

  當一個有使用連線的sortable物件開始排序動作時，所有允許的sortable觸發此事件。

  定義：$('.selector').sortable({ activate: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortactivate', function(event, ui) { ... });

deactivate

  當一個有使用連線的sortable物件結束排序動作時，所有允許的sortable觸發此事件。

  定義：$('.selector').sortable({ deactivate: function(event, ui) { ... } });

  繫結：$('.selector').bind('sortdeactivate', function(event, ui) { ... });

·方法

destory

  從元素中移除拖拽功能。

  用法：.sortable( 'destroy' )

disable

  禁用元素的拖拽功能。

  用法：.sortable( 'disable' )

enable

  啟用元素的拖拽功能。

  用法：.sortable( 'enable' )

option

  獲取或設定元素的引數。

  用法：.sortable( 'option' , optionName , [value] )

serialize

  獲取或設定序列化後的每個item元素的id屬性。

  用法：.sortable( 'serialize' , [options] )

toArray

  獲取序列化後的每個item元素的id屬性的陣列。

  用法：.sortable( 'toArray' ）

refresh

  手動重新重新整理當前sortable物件的item元素的排序。

  用法：.sortable( 'refresh' )

refreshPositions

  手動重新重新整理當前sortable物件的item元素的座標，此方法可能會降低效能。

  用法：.sortable( 'refreshPositions' )

cancel

  取消當前sortable物件中item元素的排序改變。

  用法：.sortable( 'cancel' )