Сортировка элементов на jquery?

Question

[sskalmykov]

Добрый день! Увидел на одном сайте весьма занятную сортировку.

drumshop.ru/snares/metal/#brand=all;sort=top (понажимайте «дешевые», «дорогие», по брендам покликайте)

Хотелось бы узнать, нет ли готового решения на js или придется писать самим с нуля? Просто в вопросах js я полный нуб. Очень уж понравилась эта сортировочка. Красиво и удобно.

Заранее большое спасибо.

Answer 1

[Dialog]

razorjack.net/quicksand/

Comments

[sskalmykov]

Спасибо. То — что нужно!

Answer 2

[Илья Черничкин]

jquery ui sortable jqueryui.com/demos/sortable/

Comments

[sskalmykov]

Спасибо! Вроде похоже на то, что нужно. Но анимацию судя по всему нужно будет самому дописывать?

[Илья Черничкин]

Кажется да, но вроде готовые решения должны быть

Answer 3

[Анатолий]

Мне кажется там не UI работает, стандартная анимация Jquery.
1. Переводим элементы в position:absolute + текущие координаты
2. Сортируем элементы внутри родителя в нужном порядке
3. Просчитываем новые координаты каждого учитывая новый порядок
4. Запускаем перемещение + анимация для всех одновременно
5. После завершения всех анимаций, убираем position:absolute
6.!!!
7. PROFIT!

Comments

[Илья Черничкин]

Не посмотрите мой вопрос habrahabr.ru/qa/10935/ ?)

[Анатолий]

Смотрел, не знаю как решения, это надо перечитывать кучу литературы.
Сходы могу лишь посоветовать одно:
при выборе нескольких элементов (при клике) засовывать «выделенные» в отдельный элемент, получится структура типа:

<div id="sortableContainer">
   <div class="child"></div>
   <div class="child"></div>
   <div class="childGroup">
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
   </div>
   <div class="child"></div>
   <div class="child"></div>
</div>

Answer 4

[Петруша Укропов]

ruseller.com/lessons.php?rub=32&id=827
ruseller.com/lessons.php?rub=32&id=512
если поискать по урокам jquery, можно еще несколько примеров найти