-
-
-
syntax:sortable ( options )
return type:void, element
content:ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ sortable ( การสลับตำแหน่งของ list )
โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ sortable ได้แก่
disabled, appendTo, cursor, cursorAt, delay, dropOnEmpty, handle, helper, items,
scroll, tolerance, start, stop, sort, change, beforeStop, activate, deactivate, over,
out, receive, remove, axis, containment, grid, opacity, revert
example:$("ul#sortable").sortable( { revert: true, opacity: 0.5 } );
var items = $("ul#sortable").sortable ( "option", "items" ); // ใช้คืนค่าข้อมูลของ property ที่กำหนด
$("ul#sortable").sortable ( "option", "items", "li" ); // ใช้กำหนดค่าให้กับ property ที่กำหนด
-
config:disabled
return type:boolean
content:ใช้กำหนดสถานะของการ sorting ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
example:$("ul#sortable").sortable( { disabled: true } );
-
config:appendTo
return type:string, element
content:(default=parent)
example:$("ul#sortable").sortable( { appendTo: $("#parent") } );
-
config:cursor
return type:string
content:ใช้กำหนด css cursor ที่จะให้เกิดขึ้นตอน sorting (default=auto)
example:$("ul#sortable").sortable( { cursor: "auto" } );
-
config:cursorAt
return type:object
content:ใช้กำหนดความสัมพันธ์ระหว่าง mouse กับ element ที่ถูก sorting
ว่าจะให้เมาส์อยู่ตำแหน่งใดใน element ได้แก่ top, left, right, bottom ( โดย default = false )
example:$("ul#sortable").sortable( { cursorAt: { top: 0, left: 0 } } );
-
config:delay
return type:integer
content:ใช้กำหนดเวลาหน่วงหลังจาก mousedown จนกระทั่งการ sorting เริ่มขึ้น หน่วย millisecond (default=0)
example:$("ul#sortable").sortable( { dalay: 0 } );
-
config:dropOnEmpty
return type:boolean
content:(default=true)
example:$("ul#sortable").sortable( { dropOnEmpty: true } );
-
config:handle
return type:element
content:ใช้กำหนด ตัวบังคับ การ sorting element จริง คือ sorting ที่ handle
แต่ที่ element จริงเกิดการ sorting ตามด้วย (default=false)
example:$("ul#sortable").sortable( { handle: $("#handle") } );
-
config:helper
return type:string, function
content:ถ้ากำหนด "original" หรือจะเป็นตัวของมันเองที่ถูก sorting
แต่ถ้ากำหนด "clone" จะเกิด element ใหม่และ element นั้นถูก sorting
สามารถกำหนด function ได้ แต่ function จะต้อง return element ที่จะถูก sorting ด้วย
โดยมี parameter 1 ตัว ได้แก่ element เช่น function(e) { return $(e).clone().css("color", "green"); }
(default=original)
example:$("ul#sortable").sortable( { helper: "original" } );
-
config:items
return type:selector
content:ใช้กำหนด selector ที่ใช้บ่งบอกถึง item ที่จะถูก sorting (default="> *")
example:$("ul#sortable").sortable( { items: "> *" } );
-
config:scroll
return type:boolean
content:ใช้กำหนดว่าถ้ามีการ sorting เกิน scope ของ container จะเกิด auto scroll ใช่หรือไม่ (default=true)
example:$("ul#sortable").sortable( { scroll: true } );
-
config:tolerance
return type:string
content:ให้กำหนดลักษณะ การวาง ของ sorting-element ในกรณีที่สามารถวางบน element อื่นได้ โดยกำหนด
ดังนี้ intersect คือเมื่อมีมากกว่า 50% อยู่บน
และ pointer คือต้องมีการปล่อยจึงถือว่า drop
(default=intersect)
example:$("ul#sortable").sortable( { tolerancel: "pointer" } );
-
config:start
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ sorting เริ่มขึ้น
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การเริ่มต้น sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { start: function(event,object) { alert ( "sort start" ); } } );
-
config:stop
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ sorting สิ้นสุด
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การสิ้นสุดการ sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { stop: function(event,object) { alert ( "sort stop" ); } } );
-
config:sort
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อกำลัง sorting
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การกำลัง sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { sort: function(event,object) { alert ( "sort sort" ); } } );
-
config:change
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ sorting มีการเปลี่ยนตำแหน่ง item
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การกำลัง sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { change: function(event,object) { alert ( "sort change" ); } } );
-
config:beforeStop
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนจะสิ้นสุดการ sorting
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การกำลัง sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { beforeStop: function(event,object) { alert ( "sort before stop" ); } } );
-
config:activate
return type:function
content:ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element สามารถเปลียนตำแหน่งสำเร็จ
โดยมี parameter 2 ตัว ได้แก่ event object และ object ที่มี parameter
ได้แก่ draggable object, droppable object, element object, helper object, options object
example:$("ul#sortable").sortable( { activate: function(event,object) { alert ( "sort active" ); } } );
-
config:deactivate
return type:function
content:ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element ไม่สามารถเปลียนตำแหน่งได้สำเร็จ
โดยมี parameter 2 ตัว ได้แก่ event object และ object ที่มี parameter
ได้แก่ draggable object, droppable object, element object, helper object, options object
example:$("ul#sortable").sortable( { deactivate: function(event,object) { alert ( "sort deactive" ); } } );
-
config:over
return type:function
content:ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element มา
วางเหนือ element อื่นซึ่งต้องสัมพันธ์กับลักษณะที่กำหนดบน tolerance
โดยมี parameter 2 ตัว ได้แก่ event object และ object ที่มี parameter
ได้แก่ draggable object, droppable object, element object, helper object, options object
example:$("ul#sortable").sortable( { over: function(event,object) { alert ( "sort over" ); } } );
-
config:out
return type:function
content:ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element มา
ออกจากการวางเหนือ element อื่นซึ่งต้องสัมพันธ์กับลักษณะที่กำหนดบน tolerance
โดยมี parameter 2 ตัว ได้แก่ event object และ object ที่มี parameter
ได้แก่ draggable object, droppable object, element object, helper object, options object
example:$("ul#sortable").sortable( { out: function(event,object) { alert ( "sort out" ); } } );
-
config:receive
return type:function
content:ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ containment ได้มีรายการเพิ่มเข้ามา เพราะถูกลากมาจาก containment อื่น
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การเริ่มต้น sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { receive: function(event,object) { alert ( "sort receive" ); } } );
-
config:remove
return type:function
content:ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ containment ถูกลบรายการออกไป เพราะถูกออกไปอยู่ containment อื่น
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property
ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
การเริ่มต้น sorting, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options
example:$("ul#sortable").sortable( { remove: function(event,object) { alert ( "sort remove" ); } } );
-
config:axis
return type:string
content:ให้กำหนด "x" หรือ "y" ซึ่งหมายถึงสามารถ sorting ได้เฉพาะ แนวนอน หรือ แนวตั้ง
แต่ถ้าไม่กำหนด ก็จะ sorting ได้ทั้งแนวตั้งและแนวนอน (default=false)
example:$("ul#sortable").sortable( { axis: "x" } );
-
config:containment
return type:string, element
content:ให้กำหนด element ที่จะเป็น ขอบเขต ของการที่จะ
สามารถ sorting ได้ ดังนี้ parent, document, selector (default=false)
example:$("ul#sortable").sortable( { containment: $("#container") } );
-
config:grid
return type:array
content:ใช้กำหนด กรอบ ที่จะให้ element sorting ได้ เช่น [100,100] (default=false)
example:$("ul#sortable").sortable( { grid: [100,100] } );
-
config:opacity
return type:number
content:ให้กำหนด opacity ขระที่กำลัง sorting อยู่ ค่าที่เป็นไปได้ระหว่าง 0.0 ถึง 1.0 (default=false)
example:$("ul#sortable").sortable( { opacity: 0.5 } );
-
config:revert
return type:boolean
content:ถ้ากำหนด true นั้น element ที่ถูก drag จะกลับไปยังตำแหน่ง original
เมื่อ sorting ไม่สามารถวางในที่ที่กำหนดได้ แต่ถ้าไม่กำหนดหรือกำหนด false ก็จะไม่กลับ (default=false)
example:$("ul#sortable").sortable( { revert: true } );
