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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • draggable ( options ) ให้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ draggable
    helper ใช้กำหนด original, clone หรือกำหนดเป็น function
    ghosting ถ้ากำหนด true จะมีลักษณะเหมือนการกำหนด helper: "clone"
    handle ใช้กำหนด ตัวบังคับ การ drag element จริง คือ drag ที่ handle แต่ที่ element จริงเกิดการ drag ตามด้วย
    preventionDistance ใช้กำหนด จำนวนของ pixel ที่เกิดเมื่อมีการ drag
    dragPrevention ใช้กำหนด array of selectors ที่ต้องการไม่สามารถให้ drag ได้
    cursorAt ใช้กำหนดความสัมพันธ์ระหว่าง mouse กับ element ที่ถูก drag
    appendTo (default=parent)
    disabled ใช้กำหนดสถานะของการ Drag ว่ายังใช้งานไม่ได้ ใช่หรือไม่
    cursor ใช้กำหนด css cursor ที่จะให้เกิดขึ้นตอน drag
    delay ใช้กำหนดเวลาหน่วงหลังจาก mousedown จนกระทั่งการ drag เริ่มขึ้น หน่วย millisecond
    scroll ใช้กำหนดว่าถ้ามีการ drag เกิน scope ของ container จะเกิด auto scroll ใช่หรือไม่
    start ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ drag เริ่มขึ้น
    stop ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ drag สิ้นสุด
    drag ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อกำลัง drag
    axis ให้กำหนด "x" หรือ "y" ซึ่งหมายถึงสามารถ drag ได้เฉพาะ แนวนอน หรือ แนวตั้ง
    containment ให้กำหนด element ที่จะเป็น ขอบเขต ของการที่จะสามารถ drag ได้
    grid ใช้กำหนด กรอบ ที่จะให้ element drag ได้
    opacity ให้กำหนด opacity ขระที่กำลัง drag อยู่ ค่าที่เป็นไปได้ระหว่าง 0.0 ถึง 1.0
    revert ถ้ากำหนด true นั้น element ที่ถูก drag จะกลับไปยังตำแหน่ง original
  • syntax :
    draggable ( options )

    return type :
    void, element

    content :
    ให้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ draggable
    โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ drag ได้แก่
    helper, ghosting, handle, preventionDistance, dragPrevention, cursorAt, appendTo, disabled, 
    cursor, delay, scroll, start, stop, drag, axis, ontainment, effect, grid, opacity, revert 

    example :
    $("div.box").draggable( { ghosting: true, revert: true, opacity: 0.5 } );
    var items = $("div.box").sortable ( "option", "scroll" );	// ใช้คืนค่าข้อมูลของ property ที่กำหนด
    $("div.box").sortable ( "option", "scroll", false );		// ใช้กำหนดค่าให้กับ property ที่กำหนด

  • config :
    helper

    return type :
    string, function

    content :
    ถ้ากำหนด "original" หรือจะเป็นตัวของมันเองที่ถูก drag
    แต่ถ้ากำหนด "clone" จะเกิด element ใหม่และ element นั้นถูก drag
    สามารถกำหนด function ได้ แต่ function จะต้อง return element ที่จะถูก drag ด้วย
    โดยมี parameter 1 ตัว ได้แก่ element เช่น function(e) { return $(e).clone().css("color", "green"); }
    (default=original)

    example :
    $("div.box").draggable( { helper: "clone" } );

  • config :
    ghosting

    return type :
    boolean

    content :
    ถ้ากำหนด true จะมีลักษณะเหมือนการกำหนด helper: "clone" (default=false)

    example :
    $("div.box").draggable( { ghosting: true } );

  • config :
    handle

    return type :
    element

    content :
    ใช้กำหนด ตัวบังคับ การ drag element จริง คือ drag ที่ handle แต่ที่ element จริงเกิดการ drag ตามด้วย (default=false)

    example :
    $("div.box").draggable( { handle: $(""#handle") } );

  • config :
    preventionDistance 

    return type :
    number

    content :
    ใช้กำหนด จำนวนของ pixel ที่เกิดเมื่อมีการ drag ( default = 0 )

    example :
    $("div.box").draggable( { preventionDistance: 0 } );

  • config :
    dragPrevention 

    return type :
    array

    content :
    ใช้กำหนด array of selectors ที่ต้องการไม่สามารถให้ drag ได้
    ( โดย default = [ "input", "textarea", "button", "select", "option" ] )

    example :
    $("div.box").draggable( { dragPrevention: [ "input", "textarea", "button", "select", "option" ] } );

  • config :
    cursorAt

    return type :
    object

    content :
    ใช้กำหนดความสัมพันธ์ระหว่าง mouse กับ element ที่ถูก drag
    ว่าจะให้เมาส์อยู่ตำแหน่งใดใน element ( โดย default = [ top:5, left: 5 ] )

    example :
    $("div.box").draggable( { ursorAt: [0,0] } );

  • config :
    appendTo

    return type :
    string, element

    content :
    (default=parent)

    example :
    $("div.box").draggable( { appendTo: $("#parent") } );

  • config :
    disabled

    return type :
    boolean

    content :
    ใช้กำหนดสถานะของการ Drag ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)

    example :
    $("div.box").draggable( { disabled: true } );

  • config :
    cursor

    return type :
    string

    content :
    ใช้กำหนด css cursor ที่จะให้เกิดขึ้นตอน drag (default=auto)

    example :
    $("div.box").draggable( { cursor: auto } );

  • config :
    delay

    return type :
    integer

    content :
    ใช้กำหนดเวลาหน่วงหลังจาก mousedown จนกระทั่งการ drag เริ่มขึ้น หน่วย millisecond (default=0)

    example :
    $("div.box").draggable( { delay: 0 } );

  • config :
    scroll

    return type :
    boolean

    content :
    ใช้กำหนดว่าถ้ามีการ drag เกิน scope ของ container จะเกิด auto scroll ใช่หรือไม่ (default=true)

    example :
    $("div.box").draggable( { scroll: true } );

  • config :
    start

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ drag เริ่มขึ้น
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property 
    ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
    การเริ่มต้น drag, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options 

    example :
    $("div.box").draggable( { start: function(event,object) { alert ( "drag start" ); } } );

  • config :
    stop

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ drag สิ้นสุด
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property 
    ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
    การสิ้นสุดการ drag, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options

    example :
    $("div.box").draggable( { stop: function(event,object) { alert ( "drag stop" ); } } ); 

  • config :
    drag

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อกำลัง drag
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property 
    ดังนี้ helper จะคืนค่า helper element, position จะคืนค่า object ที่มี property ของ top และ left ของ
    การกำลัง drag, offset จะเก็บค่าเหมือน cursorAt, draggable เป็น draggable object และ options 

    example :
    $("div.box").draggable( { drag: function(event,object) { alert ( "drag drag" ); } } ); 

  • config :
    axis

    return type :
    string, object

    content :
    ให้กำหนด "x" หรือ "y" ซึ่งหมายถึงสามารถ drag ได้เฉพาะ แนวนอน หรือ แนวตั้ง
    แต่ถ้าไม่กำหนด ก็จะ drag ได้ทั้งแนวตั้งและแนวนอน (default=false)

    example :
    $("div.box").draggable( { axis: "y" } ); 

  • config :
    containment

    return type :
    string, object, element

    content :
    ให้กำหนด element ที่จะเป็น ขอบเขต ของการที่จะสามารถ drag ได้ 
    ดังนี้ parent, document, selector, object ( ที่มี property left, right, top, bottom )
    effect (array) ให้กำหนด effect to cloned helpers โดยค่าทีเป็นไปได้
    ได้แก่ ["fade","fade"] และ ["fade", ""] และ ["", "fade"]
    (default=false)

    example :
    $("div.box").draggable( { containment: ["", "fade"] } ); 

  • config :
    grid

    return type :
    array

    content :
    ใช้กำหนด กรอบ ที่จะให้ element drag ได้ เช่น [100,100] (default=false)

    example :
    $("div.box").draggable( { grid: [100,100] } ); 

  • config :
    opacity

    return type :
    number

    content :
    ให้กำหนด opacity ขระที่กำลัง drag อยู่ ค่าที่เป็นไปได้ระหว่าง 0.0 ถึง 1.0 (default=false)

    example :
    $("div.box").draggable( { opacity: 0.5 } );

  • config :
    revert

    return type :
    boolean

    content :
    ถ้ากำหนด true นั้น element ที่ถูก drag จะกลับไปยังตำแหน่ง original
    เมื่อ drag ไม่สามารถวางในที่ที่กำหนดได้ แต่ถ้าไม่กำหนดหรือกำหนด false ก็จะไม่กลับ (default=false)

    example :
    $("div.box").draggable( { revert: true } ); 

 
Share This Chapter Login with Facebook