| 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" } );
