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