jQuery сортируемая анимация?

Question

Я создаю небольшую CMS и впервые работаю с сортируемой функцией.Довольно интересный и гибкий.У меня только одна проблема: все работает отлично, так, как я хочу, за исключением анимации при перетаскивании.

Если я не пытаюсь использовать анимацию в каких-либо событиях сортировки, все в порядке, и плитки хорошо видны, но мне бы очень хотелось анимировать это (так же, как переставить иконку iPhone).Я знаю, что это как-то связано с элементами ui.placeholder и ui.helper и одним из событий change / sort / etc, но я не могу заставить его работать.

Вот где я нахожусь, и это работает в том, что, как только я перехожу на новое место, освободившееся пространство оживляется (а не замыкается), но я не могу, кажется, одновременно оживить новое пространство, чтобы показать и моеСетка по существу сворачивается на одну плитку.

ОБНОВЛЕНИЕ:

Вот простая скрипка с моим базовым макетом списка HTML и поведением, которое я в данный момент могу сделать наилучшим образом:

-> Сортируемая сетка jQuery

Единственное, что мне нужно, это чтобы невыбранные блоки анимировались на свои новые позиции, а не привязывались.Это странно, поскольку авторы осознали необходимость этой опции для элемента, который вы перетаскиваете (опция скорости возврата в init), но не для остальных.Я попытался с помощью разных комбинаций показать / скрыть анимацию для элементов ui.helper / ui.placeholder с разной степенью успеха.Моя проблема не в том, чтобы понять, когда и где находятся эти объекты, поэтому анимация в лучшем случае изворотлива.

Answer 1

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

Вы можете проверить его здесь:

jQuery Сортируемый с анимацией

Answer 2

Проблема в общем случае возможна в том случае, если .sortable() используется с относительным позиционированием, особенно с поплавком, заданным css .

Другое решение, которое может быть реализовано с помощью распараллеливания анимаций путем разделения
jQuery Dragging Animation и CSS3-переходы , благодаря чему все равно реализуется в одной и той же технологии ... за исключением позиционирования.

Но тогда вам нужно создать отдельный скрипт, чтобы установить начальные абсолютные позиции для значения элементов, это может быть JavaScript, исходный css или jQuery .css()

//and sure recompose css
//by add
position:absolute  

//and remove
float:left

Удачи! :)