jquery сортируемый плагин с «эффектом скольжения»?

10

jQueryUI имеет красивый плагин, Sortable: http://jqueryui.com/demos/sortable/ Я очень доволен этим плагином, но я просто пропустил одну вещь. И это вместо того, чтобы позволить элементам, которые меняют положение, всплывают/переходят на новую позицию, я бы хотел, чтобы они "скользнули" на эту новую позицию. Другими словами, сделайте его более гладким.

Я искал сеть в течение трех дней и не нашел один плагин, который делает это (!?!??). Я имею в виду, давай, должен быть один, верно?

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

Итак, я действительно прошу помощи. Либо изменение справки, либо если вы видели плагин, который делает это, пожалуйста (:

  • 0
    Теперь я заметил, почему мой метод "не работает". Кажется, что если я перетаскиваю свой элемент слишком быстро, скрипт jquery-ui не замечает, что я даже перетаскивал его, смеется. Я даже скачал новую новую копию (просто чтобы быть уверенным) и попытался очень быстро перетащить ее на другие, а иногда это не удается. Так что есть проблема с оригинальным кодом тогда .. bleh
Теги:
animation
jquery-ui-sortable
jquery-plugins

3 ответа

8
Лучший ответ

если вы посмотрите на сортируемую демонстрационную версию с помощью 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 после начала сортировки

Поделиться
  • 0
    Это хороший путь! Только одна вещь. Когда вы его скрываете, все элементы «под» местозаполнителем подпрыгнут туда, где был заполнитель, и начнут скользить вниз. Есть ли способ "заблокировать" их или так? Потому что это выглядит очень забавно, если вы перетащите 5-й элемент поверх 4-го в вашем примере ...
  • 0
    Конечно, я отредактировал код и добавил пример
Показать ещё 2 комментария
0

Вы можете заставить его перемещаться с помощью:

(...).sortable({
revert : 300, ...

Число в миллисекундах для анимации. Также см. Подобное сообщение: В JQuery Sortable, как я могу запустить функцию до начала анимации возврата?

Поделиться
0
  • вы можете управлять им с помощью параметров событий. проверьте их...
  • Будьте осторожны с очередью, потому что если вы перетаскиваете один элемент, а затем перетаскиваете другого с первой, заканчивая, что может выглядеть забавно.
  • Я бы порекомендовал вам прочитать о .stop(), jq queue и, возможно, "cancel bubble"
Поделиться
  • 0
    Ах, хорошо, может быть, лучше использовать события. Но что вы подразумеваете под «контролем»? Объекты являются статическими, другими словами, они не могут перемещаться на странице динамически, если вы не измените свойство на фиксированное / абсолютное, и это создает множество проблем.
  • 0
    я имею в виду, что вы можете использовать start: function (){...} чтобы создать элемент-призрак, а затем использовать drag:function (){...} чтобы переместить призрак, наконец, используйте stop: function (){...} для уничтожить призрак, а затем сдвиньте оригинал в конечную позицию. или что-то типа того.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню