jQuery UI Sortierbares Problem auf IE6

Question

erste Frage hier von mir.

Wir haben eine Benutzeranpassungsseite, die ihnen die Möglichkeit gibt, verschiedene Module() in drei verschiedene Inhaltsblöcke zu verschieben. Es gibt zwei Leerzeichen und einen Inhalt mit vier Leerzeichen und dann einen Pool nicht verwendeter Module.

Ich benutze Sortierbar, um ziehen zu können & diese Module an Ort und Stelle (hin und her die drei Content-Divs). Ich habe sogar die Logik, Elemente aus dem Inhalt zu entfernen, wenn ihre Anzahl oder kombinierte Breite die verfügbaren Steckplätze/Breite übersteigt.

All dies funktioniert gut in FF3, IE7, Safari ... aber, gibt es ein bekanntes Problem mit dieser Bibliothek mit IE6? Ich meine, Gegenstände werden unsichtbar, werden beim Ziehen an eine Seite verschoben, lassen den Helfer an der falschen Stelle fallen ... und mein Klient hat ausdrücklich darum gebeten, dass es auf IE6 funktioniert. Hat jemand diese Art von Verhalten erfahren, bevor Sie diese Bibliothek benutzen?

Vielen Dank im Voraus.

(ich würde den Code eingefügt haben, aber alle Verweise und Variablen sind in Spanisch .. ich werde sie übersetzen, wenn erforderlich)

Answer 1

Sorry, Jungs .. hatte keine Zeit, weiter zu erklären, da wir in der Nähe waren, Sackgasse. Hier ist, was ich benutze:

Es gibt drei divs mit der '.groupWrapper' Klasse angewendet, #listaUno # listaDos # listaInicial. Es gibt zwei Arten von div-Modulen, alle schwebend links, mit grundsätzlich unterschiedlichen Breiten, 167x159 und 342x159, und der Container #listaUno hat eine gesetzte Breite von 346px (kann zwei kleine Module oder ein großes enthalten), während #listaDos 690px (bis zu vier kleine Module).

Mit Sortables aus dem 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. 
} 

Dieses auf FireFox funktioniert ziemlich gut, IE7, Safari, etc ... aber auf IE6, Elemente, die gezogen werden, einige schreckhaft Sachen unter anderen Seitenelemente, oder erhalten Sie mit der Maus, aber 500px weg davon, und verschiedene andere chaotisch Sachen ..

Answer 2

Es ist unmöglich, Ihnen eine vollständige Antwort ohne Ihre HTML und CSS geben. Aber ich weiß, dass viele meiner IE6-Probleme bei der Implementierung der sortierbaren/ziehbaren Funktionalität von jQuery UI gelöst wurden, indem sichergestellt wurde, dass die Elemente im IE6 "Layout" hatten. Here's a good article on the layout issue in IE.

Für meine Zwecke, landete ich mit dem folgenden CSS eine bedingte CSS-Skript für IE6 Addition, die zu meiner sortierbare Liste angewendet wird:

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

Answer 3

Dies liegt daran, Ihre Seite wird in Quirks-Modus zu machen. Fügen Sie einfach css zoom: 1 propery zu den Elementen hinzu. Das sollte das Problem lösen.

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: Setzen Sie dieses in IE bedingte Hack

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