jQuery UI可排序列表镜像 [英] jQuery UI sortable list mirror

问题描述

我有一个带缩略图的画廊(如果重要的话，我使用FlexSlider 2).

I have a gallery with thumbnails (if it matters, I use FlexSlider 2).

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

And my problem is: I need to be able to re-order the photos using thumbnails only, so that it would act like a mirror - changing the order in thumbnails should yield in changing the order in the gallery itself as well.

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

Apart from that it would be nice to have it post the serialize() info via AJAX to script that would record the new order (I use "acts_as_list" gem for my Ruby on Rails application)

所以，想象一下有这样的事情:

So, in imagine having something like this:

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

So, only #thumbnails should be changeable ... but #gallery's order should be changed automatically.

那可行吗?

推荐答案

根据您的示例，这是一个可能的解决方案，虽然不是很漂亮，但是所有主要部分都在那儿.该代码仅基于缩略图索引对图像进行重新排序，不对任何内容进行序列化.

Based on your example here is a possible solution, it's not pretty but all the major parts are there. This code only reorders images based on thumbnail index, it doesn't serialize anything.

小提琴

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

发生了什么事?

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

这篇关于jQuery UI可排序列表镜像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！