Jquery Ui Sortable с отображением испорченного изображения в IE8

Question

У меня есть запрос сортируемой коллекции изображений, т.е. для элементов установлено значение img (из-за того, что он находится в элементе управления вкладками и представляет собой горизонтальный список, не может быть отсортирован по элементам списка, я просто не могу заставить его работать), который отлично работает везде, кроме IE8 даже в режиме соответствия стандартам), где заполнитель показывает разбитое изображение. Существуют ли какие-либо настройки CSS, которые я могу использовать, чтобы сделать заполнитель невидимым в IE8. Я пытался

visibility : hidden;

Я попытался установить

content : url(transparent.gif);

не похоже, чтобы иметь никакого эффекта. Что я могу сделать, чтобы это исправить? Любые предложения о том, как я могу даже проверить, какой CSS отображается, как в Dom Explorer (или как его там называют в инструментах разработчика IE8), я не вижу img, потому что как только я отпускаю мышь, он исчезает, и Dom Похоже, что Explorer не обновляет в реальном времени то, что делает Firebug.

Редактировать: Здесь повторяется пробелм http://jsbin.com/irozu

Я упростил мой пример, другая проблема в том, что вся вкладка прокручивается, управляется ползунком. Изменение

display : inline;

до

float : left;

не работает, так как у нас больше нет прокручиваемого списка предметов. Также по какой-то странной причине, когда есть полоса прокрутки, и вы используете «li» вместо «img» в качестве цели, сортируемая перестает работать.

Обновленный пример: http://jsbin.com/ahawi.

Answer 1

Я исправил это и немного уменьшил код.

Основная проблема заключалась в том, что вы устанавливали сортировку DIV вместо UL

Кажется, работает так, как вы хотите: http://jsbin.com/egiwu

Answer 2

Если вы не хотите показывать заполнитель, убедитесь, что вы не устанавливаете параметр сортировки placeholder.

Я не вижу проблем с сортируемым поведением по умолчанию в IE8. Я попытался воссоздать то, что вы описали в этом размещенном примере: http://jsbin.com/osobu (сортируемые изображения находятся на третьей вкладке.)

Было бы полезно, если бы вы предоставили больше кода или просто отредактировали предоставленный мною пример (через http://jsbin.com/osobu/edit), чтобы дублировать проблему.

Редактировать

В ответ на ваш комментарий вы можете просто установить для параметра items значение "li", и проблема будет устранена. Кроме того, я должен использовать

#images li { float: left; }

вместо

#images li { display: inline: }

, иначе изображение будет смещено во время его перетаскивания.

Вот фиксированная демоверсия: http://jsbin.com/osezu

Answer 3

, где заполнитель показывает разбитое изображение . Существуют ли какие-либо настройки CSS, которые я могу использовать, чтобы сделать заполнитель невидимым в IE8. Я пытался

испорченное изображение появляется потому, что пользовательский интерфейс jQuery создает (в вашем случае) элемент IMG без атрибута src, установленного для заполнителя. Чтобы решить эту проблему:

1. не устанавливать параметр заполнителя или

2. измените ваш класс .showPlace на что-то вроде

   .showPlace {
      margin: 20px;
      overflow: hidden;
      width: 0; height: 0;
   }
   

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

КСТАТИ. в моем тестовом случае установка visibility: hidden на .showPlace также работала хорошо

Answer 4

Вот еще один обходной путь:

$('.mysortthings').sortable({
  start: function(event,ui) {
        $('.ui-sortable-placeholder').each( function() {
           this.setAttribute('src','/ico/unipixel.gif'); } );
       }
});

Другими словами, установите обработчик события запуска, который устанавливает атрибут src заполнителя img, как только все начнется.

Answer 5

Вы можете попробовать: display: none;.