Jquery Ui Sortable mostrando imagen rota en IE8

Question

Tengo una consulta ordenable colección de imágenes, es decir. los elementos están configurados en img (debido al hecho de que se encuentra en un control de pestaña y es una lista horizontal, no se pueden clasificar en los elementos de la lista, simplemente no puedo hacer que funcione), que funciona perfectamente en todas partes excepto en IE8 ( incluso en el modo de cumplimiento de normas), donde el marcador de posición muestra una imagen rota. ¿Hay algún tipo de configuración de CSS que pueda usar para hacer invisible el marcador de posición en IE8? Lo he intentado

visibility : hidden;

He intentado configurar el

content : url(transparent.gif);

ninguno parece tener ningún efecto. ¿Qué puedo hacer para arreglar esto? Cualquier sugerencia sobre cómo puedo examinar qué CSS se muestra, como en Dom Explorer (o como se llame en las herramientas de desarrollo de IE8) no puedo ver el img porque tan pronto como suelto el mouse desaparece y Dom Explorer no parece hacer actualizaciones en tiempo real de la forma en que lo hace Firebug.

Editar: aquí está el probelm duplicado http://jsbin.com/irozu

He simplificado demasiado mi ejemplo, el otro problema es que toda la pestaña se puede desplazar, controlada por el control deslizante. Cambiando

display : inline;

a

float : left;

no funciona porque ya no tenemos una lista de elementos desplazable. También por alguna extraña razón, cuando hay una barra de desplazamiento y usas " li " en lugar de " img " Como objetivo, el ordenable deja de funcionar.

El ejemplo actualizado se encuentra en: http://jsbin.com/ahawi .

Answer 1

  

donde el marcador de posición muestra una imagen rota . ¿Hay algún tipo de configuración de CSS que pueda usar para hacer invisible el marcador de posición en IE8? Lo he intentado

la imagen rota aparece porque jQuery UI crea (en su caso) un elemento IMG sin el conjunto de atributos src para un marcador de posición. Para resolver este problema:

1. no establezca la opción de marcador de posición o

2. cambia tu clase .showPlace a algo como

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

el código anterior ocultará el contenido de la imagen (no existente), pero dejará el elemento visible.

BTW. en mi caso de prueba, la configuración de visibilidad: oculta a .showPlace también funcionó bien

Answer 2

Si no desea mostrar un marcador de posición, asegúrese de que no configure la opción marcador de posición del ordenable.

No veo ningún problema con el comportamiento ordenable predeterminado en IE8. He intentado recrear lo que describiste en este ejemplo alojado: http://jsbin.com/osobu ( Las imágenes que se pueden ordenar se encuentran en la tercera pestaña.)

Sería útil si proporcionara más código o simplemente edite la muestra que proporcioné (a través de http: // jsbin .com / osobu / edit ) para duplicar el problema.

Editar

En respuesta a su comentario, puede configurar la opción items en " li " y el problema se solucionará. Además, te tengo que usar

#images li { float: left; }

en lugar de

#images li { display: inline: }

o de lo contrario, la imagen se desplazará mientras la estás arrastrando.

Aquí está la demostración fija: http://jsbin.com/osezu

Answer 3

Lo arreglé y reduje el código un poco.

El principal problema era que estaba configurando el DIV clasificable en lugar de UL

Parece que funciona de la manera que lo deseas: http://jsbin.com/egiwu

Answer 4

Puedes probar: display: none; .

Answer 5

Aquí hay otra solución:

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

En otras palabras, establezca un controlador de eventos de inicio, que establece el atributo 'src' del marcador de posición img, tan pronto como las cosas empiecen.