Почему эта настройка сортировки jQuery такая ненадежная/нестабильная?

У меня есть настройка страницы, основная цель которой — позволить пользователям перетаскивать и изменять порядок набора зеленых блоков из одной скользящей области в другую (попробуйте, перетащив блок справа от контейнера).

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

Перед перетаскиванием

блоки перед перетаскиванием

При перетаскивании

перетаскивание блоков

Как вы можете видеть, когда верхний левый блок перетаскивается, нижний "перепрыгивает" на другую сторону. Я думаю, это может быть вызвано наличием параметра заполнителя в JS, как если бы я его удалил, этого больше не происходит:/

Также (и что более тревожно) при перетаскивании блока, например, из правая область слева, иногда заполнитель даже не показывает!!

Заполнитель не отображается

при перетаскивании блока не отображается заполнитель

Мне также пришлось использовать $( "#areaOne, #areaTwo" ).sortable( "refresh" ); в коде, чтобы подключенный контейнер даже заметил, что в него перетаскивается блок! Может быть, он не «освежает» правильно ..?

Есть ли у кого-нибудь идеи, как исправить эти ненадежные/нестабильные проблемы с сортировкой?

Текущий код можно найти здесь > http://jsfiddle.net/WqZ9m/ 19/


ОБНОВИТЬ:

Удаление границы из класса-заполнителя решило проблему «прыжков», но заполнитель по-прежнему иногда исчезает, когда блок перетаскивается между областями. Проблема возникает, когда прокрутка не происходит (т. Е. Когда вы удаляете код прокрутки и перетаскиваете прямо из одной области в другую), поэтому я предполагаю, что проблема заключается в основном операторе «если».

Глядя на живой HTML, я также заметил, что когда удержание места исчезает, оно фактически возвращается к области, из которой оно было первоначально перетащено!

Обновленный код > http://jsfiddle.net/WqZ9m/20/

Вот запись экрана с текущей проблемой > http://www.youtube.com/watch?v=V-mxOQ2ke28

Вы увидите, что заполнитель (желтая область) исчезает:/

Любые ответы очень ценятся, спасибо


person Ross    schedule 16.07.2011    source источник
comment
Проблема «прыжков» связана с вашей таблицей стилей. Заметили, как он добавляет границу к заполнителю? Это приводит к увеличению его размера, сдвигая оставшиеся неподвижные элементы.   -  person Sam Dufel    schedule 16.07.2011
comment
Ах, гениальное удаление границы из заполнителя остановило «прыгание» блоков, но заполнитель по-прежнему иногда исчезает, когда блок перетаскивается между областями :/ Это должно быть проблемой JavaScript, верно?   -  person Ross    schedule 16.07.2011
comment
На данный момент на моем macbook air на хроме работает нормально.   -  person AlienWebguy    schedule 16.07.2011


Ответы (4)


Сортировка Jquery очень надежна.

Ваша проблема заключается в том, что плагин цикла настраивает divs вне поля зрения на «display: none», эффективно выводя их из вычислений dom (в отличие от visiblity: hidden). Вам никогда не нужно добавлять и обновлять сортировку, чтобы что-то подобное работало. Делать это во время сортировки еще более нестабильно, потому что вы обновляете без состояния.

Могу ли я предложить, чтобы вместо использования плагина цикла вы поместили обе связанные сортируемые области внутри оболочки с «переполнением: скрыто». Затем вы можете анимировать эти области желаемым образом с помощью свойства 'margin-left'. Поскольку вы уже проверяете положение объекта во время сортировки, это не должно быть проблемой. Просто используйте свой текущий блок if для размещения вашего $.animate, а не добавляйте обновление и триггерный клик.

Я разветвил вашу скрипку, чтобы продемонстрировать этот принцип в действии (очевидно, не завершенный код, но ваша проблема исправлена)

http://jsfiddle.net/dHZe9/

Ваше здоровье!

person Fresheyeball    schedule 27.07.2011
comment
Спасибо за это! Это дисплей: ни один из них не вызывает проблемы :) - person Ross; 27.07.2011


ваш класс .block css имеет значение с плавающей запятой: левое определение. поэтому, если вы удалите блок слева, блок справа (поплывет туда) займет свое место

person matthijs koevoets    schedule 16.07.2011
comment
Спасибо за комментарий, но Сэм Дюфел решил проблему «прыжков», удалив границы. Однако другая проблема все еще нуждается в исправлении! :) - person Ross; 16.07.2011

Просто поместите каждую зеленую коробку в контейнер div с одинаковыми размерами и перетащите коробку, а не контейнер коробки.

person Darm    schedule 27.07.2011