Jquery Ui Sortable montrant une image brisée dans IE8

Question

J'ai une collection d'images triable par requête, c'est-à-dire. les éléments sont définis sur img (étant donné qu'ils se trouvent dans un contrôle de tabulation et qu'il s'agit d'une liste horizontale, ils ne peuvent pas être triés sur les éléments de la liste, je ne peux tout simplement pas le faire fonctionner), ce qui fonctionne parfaitement partout, à l'exception de IE8 ( même en mode de conformité aux normes), où l’espace réservé montre une image brisée. Existe-t-il un type de paramètre CSS que je peux utiliser pour rendre le paramètre fictif invisible dans IE8? J'ai essayé

visibility : hidden;

J'ai essayé de régler le

content : url(transparent.gif);

ni semblant avoir aucun effet. Que puis-je faire pour résoudre ce problème? Aucune suggestion sur la façon dont je peux même examiner le CSS affiché, comme dans Dom Explorer (ou quelque chose qui s'appelle dans les outils de développement IE8). Je ne peux pas voir l'img car dès que je lâche la souris, elle disparaît et Dom Explorer ne semble pas mettre à jour en temps réel le processus de Firebug.

Modifier: voici le problème dupliqué http://jsbin.com/irozu

J'ai simplifié mon exemple, l’autre problème est que l’ensemble de l’onglet est déroulable, contrôlé par un curseur. Changer

display : inline;

à

float : left;

ne fonctionne pas car nous n’avons plus de liste déroulante d’éléments. Aussi pour une raison étrange, quand il y a une barre de défilement et que vous utilisez & li; li " au lieu de " img " en tant que cible, le triable cesse de fonctionner.

L'exemple mis à jour se trouve à l'adresse http://jsbin.com/ahawi .

Answer 1

  

où l'espace réservé affiche une image brisée . Existe-t-il un type de paramètre CSS que je peux utiliser pour rendre le paramètre fictif invisible dans IE8? J'ai essayé

l'image brisée apparaît, car jQuery UI crée (dans votre cas) un élément IMG sans attribut src défini pour un espace réservé. Pour résoudre ce problème:

1. ne pas définir l'option de marque de réservation ou

2. changez votre classe .showPlace en quelque chose comme

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

le code ci-dessus masquera le contenu (non existant) de l'image, mais laissera l'élément visible.

BTW. dans mon cas de test, définir visibilité: caché sur .showPlace a également bien fonctionné

Answer 2

Si vous ne souhaitez pas afficher d'espace réservé, assurez-vous de ne pas définir l'option d'espace réservé de la triable.

Je ne vois aucun problème avec le comportement par défaut de tri dans IE8. J'ai essayé de recréer ce que vous avez décrit dans cet exemple hébergé: http://jsbin.com/osobu ( Les images triables sont dans le troisième onglet.)

Il serait utile de fournir plus de code ou de modifier simplement l'exemple que j'ai fourni (via http: // jsbin .com / osobu / edit ) afin de dupliquer le problème.

Modifier

En réponse à votre commentaire, vous pouvez simplement définir l'option items sur " li et le problème est résolu. En outre, je dois vous utiliser

#images li { float: left; }

au lieu de

#images li { display: inline: }

ou bien l'image sera décalée pendant que vous la faites glisser.

Voici la démo corrigée: http://jsbin.com/osezu

Answer 3

Je l'ai corrigé et réduit un peu le code.

Le problème principal était que vous définissiez la DIV comme pouvant être triée plutôt que l'UL

semble fonctionner exactement comme vous le souhaitez: http://jsbin.com/egiwu

Answer 4

Vous pouvez essayer: display: none; .

Answer 5

Voici une autre solution de contournement:

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

En d’autres termes, définissez un gestionnaire d’événement de départ, qui définit l’attribut 'src' de l’espace réservé img, dès que les choses se passent bien.