jQuery UI problème Sortable sur IE6

Question

première question ici de moi.

Nous avons une page de personnalisation d'utilisateur qui leur donne la possibilité de déplacer différents modules() dans trois blocs de contenu différents. Il y a deux contenus d'espace et un contenu à quatre espaces, puis un ensemble de modules inutilisés à utiliser. J'utilise Sortables pour pouvoir faire glisser & déposer ces modules en place (en arrière et en avant les trois div diviseurs de contenu)

J'ai même la logique de supprimer des éléments du contenu si leurs nombres ou leurs largeurs combinées dépassent le contenu des slots/width disponibles.

Tout cela fonctionne très bien dans FF3, IE7, Safari ... mais, existe-t-il un problème connu avec cette librairie avec IE6? Je veux dire, les objets deviennent invisibles, sont déplacés d'un côté quand ils sont traînés, ils laissent tomber l'assistant au mauvais endroit ... et mon client a demandé spécifiquement de le faire fonctionner sur IE6. Est-ce que quelqu'un a éprouvé ce genre de comportements avant d'utiliser cette bibliothèque?

Merci d'avance.

(j'aurais collé le code, mais toutes les références et les variables sont en espagnol .. je vais les traduire si nécessaire)

Answer 1

Désolé les gars .. avaient pas le temps d'expliquer davantage, puisque nous étions près de impasse. Voici ce que j'utilise:

Il ya trois divs avec la classe '.groupWrapper', #listaUno #listaDos #listaInicial. Il existe deux types de modules div, tous flottants à gauche, avec des largeurs fondamentalement différentes, 167x159 et 342x159, et les conteneurs #listaUno ont une largeur de 346px (peut contenir deux petits modules ou un grand), tandis que #listaDos a 690px (jusqu'à quatre petits modules).

En utilisant Sortables de la jQuery-UI ..

$(document).ready(function(){  
    //change png to gif for IE as its very jumpy 
    if ($.browser.msie) { 
     $("img.iconico").attr("src", function() { 
      valor = this.src.replace(".png",".gif"); 
      return valor; 
     }); 
    } 
    //all three groupWrapper div elements are now draggable 
    $(".groupWrapper").sortable({ 
     connectWith: '.groupWrapper', 
     items: 'div', 
     scroll: true, 
     opacity: 0.6, 
     receive: function(event, ui) { hemosCambiado(); } 
    }); 
    $(".groupWrapper").disableSelection(); 
}); 

function init() { 
    $(".groupWrapper").sortable({ 
     connectWith: '.groupWrapper', 
     items: 'div', 
     scroll: true, 
     opacity: 0.6, 
     receive: function(event, ui) { hemosCambiado(); } 
    }); 
    $(".groupWrapper").disableSelection(); 
}; 

function hemosCambiado() { 
    var obj; 
    elemListaUno = $('#listaUno div').size(); //num elements in listaUno 
    elemListaDos = $('#listaDos div').size(); //num elements in listaDos 
    elemListaInicial = $('#listaInicial div').size(); //num elements in listaInicial 
    anchoLista1 = $('#izquierda').width(); //should be 346px; 
    anchoLista2 = $('#caja-modulos2').width(); //should be 690px; 

    //listaUno should have 2 or less elements, less than given width 
    anchoElems1 = 0; 
    $('#listaUno div').each(function(i,elem) { 
     anchoElems1 += $(elem).width(); 
    }); 
    if((elemListaUno>2) || (anchoElems1>anchoLista1)){ 
     //surplus elements are sent back to listaInicial 
     $('#listaInicial').append($('#listaUno div:last-child')); 
    } 

    //listaUno should have 4 or less elements, less than given width 
    anchoElems2 = 0; 
    $('#listaDos div').each(function(i,elem) { 
     anchoElems2 += $(elem).width(); 
    }); 
    if((elemListaDos>4) || (anchoElems2>anchoLista2)){ 
     //surplus elements are sent back to listaInicial 
     $('#listaInicial').append($('#listaDos div:last-child')); 
    } 

    $(".groupWrapper").sortable('refresh'); 
    init(); //for some reason, elements appended aren't included as dragable again in IE versions, so the need to be initialized again. 
} 

Cela fonctionne assez bien sur FireFox, IE7, Safari, etc ... mais sur IE6, des éléments qui sont traînés, font des choses sautille autres éléments de la page, ou se connecter à la souris, mais 500px loin de lui, et d'autres choses désordonnées ..

Answer 2

Il est impossible de vous donner une réponse complète sans vos fichiers html et CSS. Mais je sais que beaucoup de mes problèmes IE6 lors de l'implémentation de la fonctionnalité sortable/draggable de jQuery UI ont été résolus en m'assurant que les éléments avaient une "disposition" dans IE6. Here's a good article on the layout issue in IE.

Pour mes fins, j'ai fini par l'ajout d'un script conditionnel pour css IE6 avec le CSS suivant qui est appliqué à ma liste sortable:

/* Gives layout to elements in IE6, similar to zoom: 1; in IE7 */ 
#fields, #fields li { 
    height: 0; 
} 

Answer 3

Ceci est parce que votre page est rendu en mode Quirks. Il suffit d'ajouter le zoom css: 1 propriété aux éléments. Cela devrait résoudre le problème.

HTML:

<ul class="mysortable"> 
    <li><input type="checkbox" />Sort list 1</li> 
    <li><input type="checkbox" />Sort list 2 
     <ul class="mysortable"> 
      <li><input type="checkbox" />Sort list 1</li> 
      <li><input type="checkbox" />Sort list 2</li> 
      <li><input type="checkbox" />Sort list 3</li> 
     </ul></li> 
    <li><input type="checkbox" />Sort list 3</li> 
    </ul> 

CSS: Mettre cela dans IE bidouille conditionnelle

ul.mysortable, 
ul.mysortable ul, 
ul.mysortable li{ 
    zoom:1; 
}