jQuery UI可排序列表鏡像

我有一個畫廊縮略圖（如果它很重要，我使用FlexSlider 2）。jQuery UI可排序列表鏡像

而我的問題是：我需要能夠使用縮略圖重新排序照片，以便它像鏡子一樣 - 改變縮略圖的順序應該改變圖庫本身的順序。

除此之外，這將是不錯的，它通過AJAX發佈連載（）信息，以腳本，將記錄新訂單（我用我的Ruby on Rails應用程序「acts_as_list」寶石）

所以，在想象有這樣的事情：

<ul id="gallery"> 
    <li>Img 1</li> 
    <li>Img 2</li> 
</ul> 

<ul id="thumbnails"> 
    <li>Img 1 thumb</li> 
    <li>Img 2 thumb</li> 
</ul>

因此，只有#thumbnails應該是多變的...但#gallery的順序應該自動改變。

這樣可行嗎？

來源

2013-09-23 Dmitri

根據你的例子，這是一個可能的解決方案，它不是很漂亮，但所有的主要部分都在那裏。此代碼只根據縮略圖索引對圖像進行重新排序，它不會序列化任何內容。

小提琴

http://jsfiddle.net/Rusln/NhuZp/

代碼

var originalIndex; 
var newIndex; 
var originalImage; 
var newImage; 
var gallery = $("#gallery"); 
$("#thumbnails").sortable({ 
    start:function(ev,ui){ 
     originalIndex = ui.item.index(); 
     originalImage = gallery[0].children[originalIndex]; 
    }, 
    stop:function(ev,ui){ 
     newIndex = ui.item.index(); 
     newImage = gallery[0].children[newIndex];   
     if(originalIndex < newIndex){ 
      $(newImage).after(originalImage); 
     }else{ 
      $(newImage).before(originalImage); 
     } 
    } 
})

回事請告訴我？

得到縮略圖的原始索引
得到縮略圖的新指標
發現圖像
發現圖像
原來的指數比較新的索引
基於比較原始索引與新索引的結果改變圖像位置

來源

2013-09-23 17:48:40 rusln

哇。看起來很有希望！謝謝！ – Dmitri

很高興我能幫上忙，只要記住它只是步驟的一個*輪廓。你如何實現它們，這取決於你！ :) – rusln

我測試過了！奇蹟般有效！非常感謝你的幫助！ :) – Dmitri

jQuery UI可排序列表鏡像

回答

相關問題