Jquery Ui ordinabile mostrando un'immagine spezzata in IE8

Question

Ho una query ordinabile raccolta di immagini, ad es. gli elementi sono impostati su img (a causa del fatto che si trova in un controllo a schede ed è un elenco orizzontale, non può essere ordinato sugli elementi dell'elenco, non riesco proprio a farlo funzionare), che funziona perfettamente ovunque tranne che per IE8 ( anche in modalità conformità standard), in cui il segnaposto mostra un'immagine non funzionante. Esiste un tipo di impostazione CSS che posso usare per rendere invisibile il segnaposto in IE8? Ho provato

visibility : hidden;

Ho provato a impostare

content : url(transparent.gif);

né sembra avere alcun effetto. Cosa posso fare per risolvere questo problema? Qualche suggerimento su come posso anche esaminare quale CSS viene mostrato, come in Dom Explorer (o come si chiama negli strumenti di sviluppo di IE8) Non riesco a vedere img perché non appena lascio andare il mouse scompare e Dom Explorer non sembra aggiornare in tempo reale come Firebug.

Modifica: ecco il problema duplicato http://jsbin.com/irozu

Ho semplificato il mio esempio, l'altro problema è che l'intera scheda è scorrevole, controllata da un dispositivo di scorrimento. Modifica

display : inline;

a

float : left;

non funziona poiché non abbiamo più un elenco di elementi scorrevoli. Anche per qualche strano motivo, quando c'è una barra di scorrimento e usi " li " invece di " img " come obiettivo, il ordinabile smette di funzionare.

L'esempio aggiornato è disponibile all'indirizzo: http://jsbin.com/ahawi .

Answer 1

  

dove il segnaposto mostra un'immagine spezzata . Esiste un tipo di impostazione CSS che posso usare per rendere invisibile il segnaposto in IE8? Ho provato

appare l'immagine spezzata perché l'interfaccia utente jQuery crea (nel tuo caso) un elemento IMG senza l'attributo src impostato per un segnaposto. Per risolvere questo problema:

1. non impostare l'opzione segnaposto o

2. cambia la tua classe .showPlace in qualcosa del genere

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

il codice sopra nasconderà il contenuto dell'immagine (inesistente), ma lascerà l'elemento visibile.

A proposito. nel mio caso di prova, anche l'impostazione di visibilità: nascosto su .showPlace ha funzionato bene

Answer 2

Se non vuoi mostrare un segnaposto, assicurati di non impostare l'opzione segnaposto ordinabile.

Non vedo alcun problema con il comportamento ordinabile predefinito in IE8. Ho provato a ricreare ciò che hai descritto in questo esempio ospitato: http://jsbin.com/osobu ( Le immagini ordinabili sono nella terza scheda.)

Sarebbe utile se fornissi più codice o semplicemente modificassi l'esempio fornito (tramite http: // jsbin .com / osobu / edit ) per duplicare il problema.

Modifica

In risposta al tuo commento, puoi semplicemente impostare l'opzione items su " li " e il problema è stato risolto. Inoltre, devo usare

#images li { float: left; }

anziché

#images li { display: inline: }

altrimenti l'immagine verrà sfalsata mentre la stai trascinando.

Ecco la demo fissa: http://jsbin.com/osezu

Answer 3

L'ho risolto e ridotto un po 'il codice.

Il problema principale era che si stava impostando il DIV ordinabile piuttosto che l'UL

Sembra funzionare nel modo desiderato: http://jsbin.com/egiwu

Answer 4

Potresti provare: display: none; .

Answer 5

Ecco un'altra soluzione alternativa:

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

In altre parole, imposta un gestore eventi start, che imposta l'attributo 'src' del segnaposto img, non appena le cose vanno avanti.