Зеркало сортируемого списка пользовательского интерфейса jQuery

Question

Зеркало сортируемого списка пользовательского интерфейса jQuery

0

У меня есть галерея с миниатюрами (если это имеет значение, я использую FlexSlider 2).

И моя проблема: мне нужно иметь возможность повторно заказывать фотографии, используя только миниатюры, чтобы они действовали как зеркало - изменение порядка в эскизах должно приводить к изменению порядка в самой галерее.

Кроме того, было бы неплохо, если бы он опубликовал информацию serialize() через AJAX для скрипта, который записывал новый порядок (я использую gem для acts_list для моего приложения Ruby on Rails)

Итак, представьте себе что-то вроде этого:

<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 должен быть изменен автоматически.

Это выполнимо?

Dmitri 23 сен. 2013, в 14:57

Источник

Теги:

jquery

ruby-on-rails

jquery-ui

jquery-ui-sortable

1 ответ

Ещё вопросы

rusln · Accepted Answer · 2013-09-23T15-35-00.000Z

На основе вашего примера это возможное решение, оно не очень красивое, но все основные части есть. Этот код только переупорядочивает изображения на основе индекса эскизов, он ничего не сериализует.

скрипка

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

Что происходит?

получить оригинальный указатель эскиза
получить новый указатель эскиза
найти изображение, соответствующее оригинальному указателю
найти изображение, соответствующее новому указателю
сравнить исходный индекс с новым индексом
изменить положение изображения на основе результата сравнения исходного индекса с новым индексом

Ух ты. Выглядит очень перспективно! Спасибо!
рад, что смог помочь, просто имейте в виду, что это только набросок шагов. Как вы их реализуете, решать только вам! :)
Я проверил это! Работает как шарм! Большое вам спасибо за помощь! :)