Jquery сортируемый плагин с "скользящим эффектом"?
jQueryUI имеет красивый плагин, Sortable: http://jqueryui.com/demos/sortable/
Я очень доволен этим плагином, но я просто пропустил одну вещь. И это вместо того, чтобы позволить элементам, которые меняют положение, всплывают/переходят на новую позицию, я бы хотел, чтобы они "скользнули" на эту новую позицию. Другими словами, сделайте его более гладким.
Я искал сеть в течение трех дней и не нашел один плагин, который делает это (!?!??). Я имею в виду, давай, должен быть один, верно?
Я также попытался немного модифицировать код, и я получил его для работы (путем клонирования элемента, сползания клона в новую позицию, а затем удаления клона, а пока я скрываю оригинальный элемент и отобразить его после удаления клона). Но это работает не очень хорошо, и я думал, что там где-то там должно быть лучше!
Итак, я действительно прошу помощи. Либо изменение справки, либо если вы видели плагин, который делает это, пожалуйста (:
Ответы
Ответ 1
если вы посмотрите на сортируемую демонстрационную версию с помощью placehoder и используйте следующий код для инициализации сортировки, вы увидите скользящее действие в заполнителе
$(function() {
$("#sortable").sortable({
placeholder: 'ui-state-highlight',
start: function (e,ui){ // new lines to
$(ui.placeholder).slideUp(); // remove popping
}, // effect on start
change: function (e,ui){
$(ui.placeholder).hide().slideDown();
}
});
$("#sortable").disableSelection();
});
вы можете изменить класс ui-state-highlight на все, что вы хотите его стилизовать, вы можете сделать его невидимым с помощью видимости css-property и установить его в скрытую
i сделал основной пример в jsbin.com, чтобы вы могли видеть, что его нравится
EDIT: пример с удаленным эффектом popping после начала сортировки
Ответ 2
- вы можете управлять им с помощью параметров событий. проверьте их...
- Будьте осторожны с очередью, потому что если вы перетаскиваете один элемент, а затем перетаскиваете другого с первой, заканчивая, что может выглядеть забавно.
- Я бы порекомендовал вам прочитать о .stop(), jq queue и, возможно, "cancel bubble"
Ответ 3
Вы можете заставить его перемещаться с помощью:
(...).sortable({
revert : 300, ...
Число в миллисекундах для анимации.
Также см. Подобное сообщение: В JQuery Sortable, как я могу запустить функцию до начала анимации возврата?