jQuery UI Drag and Drop

最近有拖曳效果的需求，就研究了一下jQuery UI，覺得還滿好用的，這邊做一個書架的範例來示範。

Demo

首先到jQuery UI下載，不過平常有在寫的應該都會有了吧。 XD

稍微配置一下，就可以直接用了

view plaincopy to clipboardprint

1. $(".drag_row").draggable();   
2. $( ".block" ).droppable({   
3.       drop: function( event, ui ) {   
4.         $( ".drag_row" ).remove();   
5.         $( "<div class='drag_row'><img src='book.jpg'></div>" ).appendTo( this ).draggable();   
6.     }   
7. });  

程式很單純，首先讓物件可以被draggable，然後在可以放置的地方寫droppable就好了。

重點是drop的那個function，當要drop時候的行為都寫在那邊，我寫的功能是移過去後清掉原本的，再把拖曳中的內容塞進去。

如果要對dom做操作，jQuery UI也可以滿足這個需求

view plaincopy to clipboardprint

1. $(selector).draggable({   
2.     start: function( event, ui ) {   
3.         //這邊可以寫相對於原本 drag 物件 dom 的操作   
4.     }   
5. });   
6.   
7. $(selector).droppable({   
8.     drop: function( event, ui ) {   
9.         //這邊可以寫要 drop 地方 dom 的操作   
10.     }   
11. });  

更多使用方法可以看API的說明。