jQuery Draggable / Droppable

Draggable :

$( ".selector" ).draggable();

使用選項的說明可參考此作者：
雪兒隨筆記: [jQuery]UI/API/1.8/Draggable



說明一下 helper 這個選項：


helper
傳入形態 : String("original", "clone") 或 Function()
預設值："original"

指定拖曳元素的樣式，original 爲原本的元素；clone 爲復制一個與原本樣式相同的元素；function 回傳爲一個 DOM 元素，可制定拖拉後產生新的樣式的元素




Droppable :

$( ".selector" ).droppable();

使用選項可參考此作者：
雪兒隨筆記: [jQuery]UI/API/1.8/Droppable


列出常用的事件：
activate/ deactivate：在接受的物件拖動時觸發事件，例如可變更可放置區的背景顏色
drop：拖曳物件在此元素內放開後觸發事件
out：物件從此拖曳區移走後觸發事件
over：物件拖曳至此區上時觸發事件




References :
Draggable Widget | jQuery UI API Documentation
Droppable Widget | jQuery UI API Documentation