jQuery UI 可排序列表镜像

Question

我有一个带有缩略图的画廊（如果重要，我会使用 FlexSlider 2）。

我的问题是：我需要能够仅使用缩略图重新排序照片，这样它就可以像一面镜子一样 - 更改缩略图中的顺序也应该改变画廊本身的顺序。

除此之外，最好让它通过 AJAX 将 serialize() 信息发布到记录新订单的脚本（我在我的 Ruby on Rails 应用程序中使用“acts_as_list”gem）

所以，想象一下有这样的东西：

<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 的顺序应该自动更改。

这可行吗？

Answer 1

根据您的示例，这里是一个可能的解决方案，它并不漂亮，但所有主要部分都在那里。 此代码仅根据缩略图索引重新排序图像，它不会序列化任何内容。

小提琴

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);
        }
    }
})

发生了什么事？

• 获取缩略图的原始索引
• 获取缩略图的新索引
• 找到原始索引对应的图片
• 找到新索引对应的图片
• 将原始索引与新索引进行比较
• 根据原始索引与新索引的比较结果更改图像位置