jQuery Sortable Method : สอน method และ property ของ Sortable Method, เรียน method และ property ของ Sortable Method
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • sortable ( options ) ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ sortable ( การสลับตำแหน่งของ list )
    disabled ใช้กำหนดสถานะของการ sorting ว่ายังใช้งานไม่ได้ ใช่หรือไม่
    appendTo (default=parent)
    cursor ใช้กำหนด css cursor ที่จะให้เกิดขึ้นตอน sorting
    cursorAt ใช้กำหนดความสัมพันธ์ระหว่าง mouse กับ element ที่ถูก sorting
    delay ใช้กำหนดเวลาหน่วงหลังจาก mousedown จนกระทั่งการ sorting เริ่มขึ้น หน่วย millisecond
    dropOnEmpty (default=true)
    handle ใช้กำหนด ตัวบังคับ การ sorting element จริง
    helper ใช้กำหนด original, clone หรือ function
    items ใช้กำหนด selector ที่ใช้บ่งบอกถึง item ที่จะถูก sorting
    scroll ใช้กำหนดว่าถ้ามีการ sorting เกิน scope ของ container จะเกิด auto scroll ใช่หรือไม่
    tolerance ให้กำหนดลักษณะ การวาง ของ sorting-element ในกรณีที่สามารถวางบน element อื่นได้
    start ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ sorting เริ่มขึ้น
    stop ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ sorting สิ้นสุด
    sort ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อกำลัง sorting
    change ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ sorting มีการเปลี่ยนตำแหน่ง item
    beforeStop ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนจะสิ้นสุดการ sorting
    activate ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element สามารถเปลียนตำแหน่งสำเร็จ
    deactivate ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element ไม่สามารถเปลียนตำแหน่งได้สำเร็จ
    over ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element มา วางเหนือ element
    out ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี sorting-element มา ออกจากการวางเหนือ
    receive ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ containment ได้มีรายการเพิ่มเข้ามา เพราะถูกลากมาจาก containment อื่น
    remove ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ containment ถูกลบรายการออกไป เพราะถูกออกไปอยู่ containment อื่น
    axis ให้กำหนด "x" หรือ "y" ซึ่งหมายถึงสามารถ sorting ได้เฉพาะ แนวนอน หรือ แนวตั้ง
    containment ให้กำหนด element ที่จะเป็น ขอบเขต ของการที่จะ สามารถ sorting ได้
    grid ใช้กำหนด กรอบ ที่จะให้ element sorting ได้
    opacity ให้กำหนด opacity ขระที่กำลัง sorting อยู่ ค่าที่เป็นไปได้ระหว่าง 0.0 ถึง 1.0
    revert ถ้ากำหนด true นั้น element ที่ถูก drag จะกลับไปยังตำแหน่ง original
  • 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 } );

 
Share This Chapter Login with Facebook