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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • droppable ( options ) ใช้กำหนด ให้ทุก element ภายใน set มีคุณสมบัติ droppable
    accept ให้กำหนด selector ของ draggable ที่สามารถ drop ภายใน
    tolerance ให้กำหนดลักษณะ การวาง ของ drag-element ในกรณีที่สามารถวางบน drop-element ได้
    disabled ใช้กำหนดสถานะของการ Drop ว่ายังใช้งานไม่ได้ ใช่หรือไม่
    activate ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา วางลงบน drop-element สำเร็จ
    deactivate ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา วางลงบน drop-element ไม่สำเร็จ
    over ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา วางเหนือ drop-element
    out ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา ออกจากการวางเหนือ drop-element
    drop ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อมี drag-element มา วางลงบน drop-element โดยไม่สนใจว่าสำเร็จหรือไม่
    activeClass ให้กำหนด class name ในกรณีที่ drop-element มีสถานะเป็น active state
    hoverClass ให้กำหนด class name ในกรณีที่ drop-element มีสถานะเป็น hover state
  • syntax :
    droppable ( options )

    return type :
    void, element

    content :
    ใช้กำหนด ให้ทุก element ภายใน set มีคุณสมบัติ droppable
    โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ drop ได้แก่
    accept, tolerance, disabled, activate, deactivate, over, out, drop, activeClass, hoverClass

    example :
    $("div.box").droppable( { accept: ".box", activeClass: "box-active", hoverClass: "box-hover" } );
    var items = $("div.box").sortable ( "option", "disabled" );	// ใช้คืนค่าข้อมูลของ property ที่กำหนด
    $("div.box").sortable ( "option", "disabled", true );		// ใช้กำหนดค่าให้กับ property ที่กำหนด

  • config :
    accept

    return type :
    string, function

    content :
    ให้กำหนด selector ของ draggable ที่สามารถ drop ภายใน
    ทุก element ของ set ได้ หรืออาจจะกำหนดเป็น function โดยจะต้อง return true
    ถึงจะสามารถ drop ภายใน ทุก element ของ set ได้ (default=*)

    example :
    $("div.box").droppable( { accept: ".box" } );

  • config :
    tolerance

    return type :
    string

    content :
    ให้กำหนดลักษณะ การวาง ของ drag-element ในกรณีที่สามารถวางบน drop-element ได้ โดยกำหนด
    ดังนี้ touch คือเมื่อโดนก็ถือว่า drop แล้ว
    และ pointer คือต้องมีการปล่อยจึงถือว่า drop 
    และ intersect คือเมื่อมีมากกว่า 50% อยู่บน
    และ fit คือต้องตำแหน่งทับกันพอดีจึงจะถือว่า drop
    (default=intersect)

    example :
    $("div.box").droppable( { tolerance: "touch" } );

  • config :
    disabled

    return type :
    boolean

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

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

  • config :
    activate

    return type :
    function

    content :
    ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา
    วางลงบน drop-element สำเร็จ โดยมี parameter 2 ตัว ได้แก่ event object 
    และ object ที่มี parameter ได้แก่ draggable object, droppable object, element object, helper object, options object

    example :
    $("div.box").droppable( { activate: function(event,object) { alert ( "drop activate" ); } } );

  • config :
    deactivate

    return type :
    function

    content :
    ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา
    วางลงบน drop-element ไม่สำเร็จ โดยมี parameter 2 ตัว ได้แก่ event object 
    และ object ที่มี parameter ได้แก่ draggable object, droppable object, element object, helper object, options object

    example :
    $("div.box").droppable( { deactivate: function(event,object) { alert ( "drop deactivate" ); } } );

  • config :
    over

    return type :
    function

    content :
    ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา
    วางเหนือ drop-element ซึ่งต้องสัมพันธ์กับลักษณะที่กำหนดบน tolerance
    โดยมี parameter 2 ตัว ได้แก่ event object และ object ที่มี parameter 
    ได้แก่ draggable object, droppable object, element object, helper object, options object

    example :
    $("div.box").droppable( { over: function(event,object) { alert ( "drop over" ); } } );

  • config :
    out

    return type :
    function

    content :
    ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อ มี drag-element มา
    ออกจากการวางเหนือ drop-element ซึ่งต้องสัมพันธ์กับลักษณะที่กำหนดบน tolerance
    โดยมี parameter 2 ตัว ได้แก่ event object และ object ที่มี parameter 
    ได้แก่ draggable object, droppable object, element object, helper object, options object

    example :
    $("div.box").droppable( { out: function(event,object) { alert ( "drop out" ); } } );

  • config :
    drop

    return type :
    function

    content :
    ให้กำหนด function ที่จะถูกเรียกใช้งานเมื่อมี drag-element มา
    วางลงบน drop-element โดยไม่สนใจว่าสำเร็จหรือไม่ โดยมี parameter 2 ตัว ได้แก่ event object 
    และ object ที่มี parameter ได้แก่ draggable object, droppable object, element object, helper object, options object

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

  • config :
    activeClass

    return type :
    string

    content :
    ให้กำหนด class name ในกรณีที่ drop-element มีสถานะเป็น active state (default=false)

    example :
    $("div.box").droppable( { activateClass: "dropActive" } );

  • config :
    hoverClass 

    return type :
    string

    content :
    ให้กำหนด class name ในกรณีที่ drop-element มีสถานะเป็น hover state (default=false)

    example :
    $("div.box").droppable( { hoverClass: "dropHover" } );

 
Share This Chapter Login with Facebook