2013-08-19 130 views
1

這是我正在開發的這個網站,可以找到here。這是一個攝影網站,我的客戶要求我實施一些能夠讓她移動照片並改變它們出現順序的東西。他們來自MySQL數據庫,並用jQuery Masonry顯示。jQuery砌體和UI排序

我以爲即時可用的jQuery UI Sortable,我一直試圖實現它,絕對沒有運氣。 我該如何做到這一點?請有人指出我正確的方向嗎?

在此先感謝!

+1

你不應該只是發佈鏈接到您的網站。你應該把相關的代碼放在你的問題中。另外,您需要展示所提問題的知識......您對jQuery UI可排序有什麼問題? – dezman

+0

嗯,我不能理清這些元素,只能移動它們。代碼是這裏的腳本:http://www.mrclay.org/2013/06/05/simpler-masonry-sortable-working-together/ 但我也需要能夠在數據庫中排序,我有沒有ideia如何:/ 我對缺乏知識表示歉意... –

+3

你可能想看看打包http://packery.metafizzy.co。它基本上是砌築的,內置可排序。 –

回答

2

我正在努力解決同樣的問題,到目前爲止,我的答案是用jQuery的可排序的開始,停止,更改和排序事件來更改類。像這樣:

$('#sortable').sortable({  
     start: function(event, ui) {    
       console.log(ui); 
      ui.item.removeClass('masonry'); 
      ui.item.parent().masonry('reloadItems') 
       }, 
     change: function(event, ui) { 
      ui.item.parent().masonry('reloadItems'); 
       }, 
     stop: function(event, ui) { 
      ui.item.addClass('masonry'); 
      ui.item.parent().masonry('reloadItems'); 
}); 

這裏是一個working example和關於這一主題的JS Fiddle。這是一個開始。但是,這不是一個'presto'解決方案,這個例子適用於較老的石匠版本,由於「reload」方法被layout()和reloadItems()所取代,所以最新版本有一些bug實現。 或者...如果它適合你,你可以使用舊的石工版本。

或者,您可以使用jQuery.Shapeshift(),這基本上是你要找的。

+1

這對我來說還不夠。我必須在「reloadItems」調用刷新視圖之後添加「$ container.masonry()」或「msnry.layout()」。 – Sander

+0

和我一樣,桑德說。 ui.item.parent()砌體( 'reloadItems');本身對我沒有任何幫助。 – stef