Jquery Ui Sortable zeigt gebrochenes Bild in IE8

Question

Ich habe eine Abfrage sortierbar Sammlung von Bildern, das heißt. die Elemente werden auf img (aufgrund der Tatsache, dass es in einem Registersteuer ist und eine horizontale Liste, kann nicht auf den Listenelementen sortiert werden, kann ich einfach nicht daran arbeiten), die perfekt überall mit Ausnahme von IE8 funktioniert ( auch in der Einhaltung von Standards-Modus), wobei der Platzhalter ein gebrochenes Bild zeigt. Gibt es irgendeine Art von CSS Einstellung ich verwenden kann den Platzhalter unsichtbar in IE8 zu machen. Ich habe versucht,

visibility : hidden;

Ich habe versucht Einstellung der

content : url(transparent.gif);

weder scheinen keine Wirkung zu haben. Was kann ich dieses Problem beheben? Alle Vorschläge, wie ich kann auch prüfen, welche CSS wird gezeigt, wie in Dom Explorer (oder was auch immer seine in den IE8-Entwicklertools genannt) ich nicht das img sehen kann, denn sobald ich gehe von der Maus lassen Sie es verschwindet und Dom Explorer scheint nicht in Echtzeit zu tun, die Aktualisierung der Art und Weise Firebug der Fall ist.

Edit: Hier wird die probelm dupliziert http://jsbin.com/irozu

ich über mein Beispiel vereinfacht, ist das andere Problem, dass der gesamte Registerkarte scrollbaren, gesteuert durch Schieber. Ändern

display : inline;

float : left;

nicht funktioniert, da wir nicht mehr eine scrollbare Liste von Elementen haben. Auch aus irgendeinem seltsamen Grund, wenn es eine Scrollbar ist und Sie „li“ anstelle von „img“, wie das Ziel, die sortierbare nicht mehr funktioniert.

Das aktualisierte Beispiel unter:. http://jsbin.com/ahawi

Answer 1

  

wobei der Platzhalter zeigt ein gebrochenes Bild . Gibt es irgendeine Art von CSS Einstellung ich verwenden kann den Platzhalter unsichtbar in IE8 zu machen. Ich habe versucht,

das zerbrochene Bild erscheint, weil jQuery UI (in Ihrem Fall) erzeugt ein IMG-Element ohne src-Attribut für einen Platzhalter gesetzt. Zur Lösung dieses Problems:

1. setzt nicht die Platzhalter-Option oder

2. ändern Sie Ihre .showPlace Klasse so etwas wie

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

über den Code den (nicht vorhandenen) Bildinhalt verstecken, sondern wird das Element sichtbar lassen.

BTW. in meinem Test-Fall visibility: hidden Einstellung auch gut .showPlace gearbeitet

Answer 2

Wenn Sie nicht über einen Platzhalter angezeigt werden soll, stellen Sie sicher, dass Sie nicht setzen Sie die placeholder Option ist sortierbar.

Ich sehe kein Problem mit dem Standard sortierbar Verhalten in IE8. Ich habe versucht, neu zu erstellen, was Sie in diesem beschrieben gehosteten Beispiel: http://jsbin.com/osobu ( die sortierbar Bilder sind in der dritten Tab.)

Es wäre hilfreich, wenn Sie mehr Code zur Verfügung gestellt oder ändern, nur die Probe I zur Verfügung gestellt (über http: // jsbin .com / osobu bearbeiten / ), um das Problem zu duplizieren.

Bearbeiten

Als Antwort auf Ihren Kommentar, können Sie einstellen, nur die items Option "li" und das Problem behoben ist. Auch ich muss Sie verwenden

#images li { float: left; }

statt

#images li { display: inline: }

oder sonst wird das Bild versetzt werden, während Sie es ziehen.

Hier ist die feste Demo: http://jsbin.com/osezu

Answer 3

Ich reparierte es und reduziert den Code ziemlich viel.

Das Hauptproblem war Sie die DIV sortierbar eher als die UL wurden Einstellung

Es scheint, nur die Art und Weise arbeiten Sie es wollen: http://jsbin.com/egiwu

Answer 4

Sie könnten versuchen. display: none;

Answer 5

Hier ist eine andere Abhilfe:

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

Mit anderen Worten, einen Anfangs Event-Handler, der das ‚src‘ Attribut des Platzhalter img setzt, sobald die Dinge gehen.