jQuery UI Drag and Drop

drag and drop

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

Demo

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

稍微配置一下,就可以直接用了
  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也可以滿足這個需求
  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的說明

留言

Unknown寫道…
你的網頁技術分享都寫的不錯! 樂於分享~
我挺喜歡的.

加油~

我也是羅東人,對網頁設計也有熱忱.
希望能有機會認識您請益!
紅色死神寫道…
很高興認識你 :D
Unknown寫道…
請問下您的mobile app 都是用web 完成的嗎?
像"糖果天后的藝想世界" 展覽app 這app 會使用到哪些技術呢?

實在不怎了解怎把web 包成一支app!

方便的話~麻煩您解說下了,該如何下手.感恩



紅色死神寫道…
mobile app 都是原生的寫的喔
用web寫的話效能會差很多
可以的話還是原生寫的好