Sortable

マウスを使ってリスト上またはグリッド上にて、マウスを使ってリスト順を変更できる要素にします。

jQuery UI Sortableプラグインは、選択した要素をマウスによって並べ替え可能な要素にします。

テーブル行に適用したい場合は、tableではなくtbodyに指定しなければいけません。

オプション 説明
appendTo

型:jQuery or Element or Selector or String 初期値:"parent"

選択した要素をドラッグ移動する際のヘルパー要素が挿入される場所を指定します。 (z-indexによる重なりなどの問題に対処するため)

jQuery
ヘルパーを挿入する要素をjQueryオブジェクトで指定します。
Element
ヘルパーを挿入する要素を指定します。
Selector
ヘルパーを挿入する要素をセレクターで指定します。
String
"parent"文字列を指定すると、ヘルパーは並び替え要素の兄弟要素になります。
$( ".selector" ).sortable({ appendTo: document.body });
// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );

// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
axis

型:String
初期値:false

ドラッグ出来る方向を、水平方向または垂直方向に限定することができます。 指定可能な値は、"x"と"y"です。

cancel

型:Selector 初期値:":input,button"

マッチした要素の並び替え処理が開始されることをキャンセルします。

connectWith

型:Selector 初期値:false

別の並び替え要素のセレクタを指定することで、リスト項目が接続(連携)されます。 この指定はあくまで一方からの関係性を示すものなので、もし双方向での接続が必要な場合は、両方の並び替え要素のオプションで connectWithオプションを指定しなければいけません。

containment

型:Element or Selector or String 初期値:false

並び替え要素がドラッグできる範囲を指定します。 指定された要素は、計算された(可能な?)widthとheightを持っている必要があります。(それが明示的に指定されている必要はありません) 例えば、float:leftの指定によって実質的にheightが0とみなされると、このオプションの指定は無効になります。

Element
ドラッグ可能範囲を要素で指定します。
Selector
ドラッグ可能範囲の要素をセレクターで指定します。
String
ドラッグ可能範囲の要素を文字列で指定します。 指定可能な値は、"parent"、"document"、"window"です。
cursor

型:String 初期値:"auto"

並び替えドラッグ時に表示するカーソルを指定します。

cursorAt

型:Object 初期値:false

並び替え要素、またはヘルパーをドラッグ移動するカーソルは常に同じ位置にあります。 1つ、または2つのハッシュの組み合わせを指定することで、この位置を調整することが可能です。{top, left, right, botto}

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

型:Integer 初期値:0

並び替えを開始するまでの時間をミリ秒単位で指定します。 この遅延処理を加えることで、クリックした際にドラッグの誤操作を防ぐ助けになります。

disabled

型:Boolean 初期値:false

trueを指定すると、並び替え処理を無効化します。

distance

型:Number 初期値:1

ソートを開始する距離をピクセル単位で指定します。 このオプションを指定すると、並び替え要素はドラッグしたマウスが指定された距離を超えるまで 並び替え処理を開始しません。 要素のクリックも可能にしたい場合に使用されます。

dropOnEmpty

型:Boolean 初期値:true

falseに指定した場合、並び替え要素を空の接続(連携)要素にドロップすることが出来なくなります。 (coonectWithオプションを確認してください)

forceHelperSize

型:Boolean 初期値:false

trueが指定された場合、ヘルパーはサイズを持つことを強制されます。

forcePlaceholderSize

型:Boolean 初期値:false

trueが指定された場合、プレースホルダ(正式に要素が入るまでの代替)はサイズを持つことを強制されます。

grid

型:Array 初期値:false

並び替え要素、またはヘルパーを吸着させるグリッドをピクセル単位で指定します。 [x,y]の配列の形式で指定します。

handle

型:Selector or Element 初期値:false

指定された要素にクリックして並び替えを開始することを強制します。

helper

型:String or Function 初期値:"original"

ドラッグ時に表示するヘルパー要素を指定します。

String
もし、"clone"を指定すれば、その要素のクローンが生成されドラッグのヘルパーになります。
Function
ドラッグのヘルパーとする要素を戻り値として返す関数を指定します。 この要素はeventと並び替えようとしている要素を引数として受け取ります。
items

型:Selector 初期値:"> *"

並び替え機能を付与したい要素をセレクターとして指定します。

opacity

型:Number 初期値:false

並び替え時のヘルパーの透明度を0.01~1の数値で指定します。

placeholder

型:String 初期値:false

プレースホルダのclass名を指定します。 指定が無ければ空白になります。

revert

型:Boolean or Number 初期値:false

並び替え要素が新しい位置に配置される(戻される)際に、滑らかなアニメーションを使用するか否かを指定します。 (falseの場合は、ドラッグを離した瞬間に、即座に新しい位置に配置されます。)

Boolean
trueが指定されると、デフォルトのdurationでアニメーションします。
Number
アニメーションのdurationをミリ秒単位で指定します。
scroll

型:Boolean 初期値:true

端に要素がドラッグされた際に、ページがスクロールするか否かを指定します。

scrollSensitivity

型:Number 初期値:20

マウスポインタがどれだけ近づいたらスクロールを開始するのかを指定します。

scrollSpeed

型:Number 初期値:20

scrollSensitivityの範囲内にマウスポインタが入った際に、 スクロールする速度を指定します。

tolerance

型:String 初期値:"intersect"

項目が入れ替わる重なり具合のモードを指定します。

"intersect"
少なくとも50%重なったら入れ替わります。
"pointer"
マウスポインターが重なったら入れ替わります。
zIndex

型:Integer 初期値:1000

並び替え時の要素、ヘルパーのz-index指定になります。

メソッド説明
cancel()

ソートによる変更をキャンセルし、ソートが開始される直前の状態に戻します。

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

並び替え機能を完全に削除します。

disable()

並び替え機能を無効化します。

enable()

並び替え機能を有効にします。

option( optionName )

戻り値:Object

optionNameに指定したオプションの現在の値を取得します。

optionName
型:String
取得したいオプションの名前を指定します。
option()

戻り値:PlainObject

オプションの各キーと値がペアとなったオブジェクトを返します。

option( optionName, value )

引数のoptionNameのオプションに値を設定します。

optionName
型:String
設定したいオプションの名前を指定します。
value
型:Object
設定したい値を指定します。
option( options )

オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。

option
型:Object
設定したいオプションのキーと名前のペアを指定します。
refresh()

並び替えの項目の要素をリフレッシュします。 全ての並び替え要素のリロードをトリガし、新しい項目を認識します。

refreshPositions()

並び替え要素のキャッシュされたポジションをリフレッシュします。

serialize( options )

戻り値:string

並び替え要素のID群をform/ajaxで送信できる文字列にシリアライズします。 このメソッドによってURLに付加するハッシュ文字列が生成され、新しい順序の情報を簡単にサーバに送信することが出来ます。 デフォルトでは、"setname_number"のフォーマットで並び替え要素のidを探し、ハッシュは "setname[]=number&setname[]=number"のようにして出力します。

注).もし、シリアライズが空の文字列を返した場合、id属性にアンダースコアが含まれていないか確認してください。 各id属性は"set_number"の形式である必要があり、例えばid属性が"foo_1","foo_5","foo_2"の3つの要素の リストが存在した場合、"foo[]=1&foo[]=5&foo[]=2"のように出力します。 アンダースコア、イコール、ハイフンがsetとnumberの区切り文字列として使用可能です。 例えば、"foo=1"、"foo-1"、"foo_1"は全て"foo[]=1"にシリアライズします。

引数optionsには、シリアライズ化のカスタマイズをオブジェクトのハッシュ形式で指定します。

key
初期値:区切り文字の前半部分
型:String
指定すると、それがキーとして使用されます。
attribute
初期値:"id"
型:String
シリアライズに使用される値を持つ属性名を指定します。
expression
初期値:/(.+)[-=_](.+)/
型:RegExp
キーと値を区切るための正規表現を指定します。
toArray()

戻り値:Array

並び替え要素のid文字列を格納した配列を返します。

widget()

戻り値:Object

並び替え要素を含めたjQueryオブジェクトを返します。

イベント 説明
activate( event, ui )

型:sortactivate

接続リスト(connectWithオプション参照)を使用する場合にこのイベントがトリガされ、ドラッグ開始時に接続中のすべてのリストがそれを受信します。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
$( ".selector" ).sortable({
    activate: function( event, ui ) {}
});
$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
beforeStop( event, ui )

型:sortbeforestop

並び替え操作を停止したが、プレースホルダ/ヘルパーがまだ使用可能な際にトリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
change( event, ui )

型:sortchange

並び替えの間、DOMのpositionが変更されるとトリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
create( event, ui )

型:sortcreate

並び替え要素が生成された際にトリガされます。

deactivate( event, ui )

型:sortdeactivate

ソートが停止されたときにこのイベントがトリガされ、 これがトリガされると、すべての接続リストに伝播されます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
out( event, ui )

型:sortout

接続リストに並び替え項目が移動された際にトリガれさます。

over( event, ui )

型:sortover

接続リストに並び替え項目が移動してきた際にトリガれさます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
receive( event, ui )

型:sortreceive

接続リストが他のリストから並び替え項目を受け取った際にトリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
remove( event, ui )

型:sortremove

並び替え項目がリストからドラッグされて別のリストに移動された際に、トリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
sort( event, ui )

型:sort

並び替えの間、トリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
start( event, ui )

型:sortstart

並び替えが開始した際にトリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
stop( event, ui )

型:sortstop

並び替え処理がを停止した際にトリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
update( event, ui )

型:sortupdate

並び替え処理がを停止し、DOMのpositionが変更された際にトリガされます。

ui.helper
型:jQuery
並び替えヘルパーのjQueryオブジェクトです。
ui.item
型:jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
ui.offset
型:Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型:Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型:Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型:jQuery
他の並び替え要素から送られてきた別の並び替え要素です。

 Back to top

© 2010 - 2017 STUDIO KINGDOM