JQuery UI Sort Issues on IE6

Question

The first question is from me.

We have a user settings page that allows them to move different modules () into three different blocks of content. There are two spaces and four spaces, followed by a pool of unused modules.

I use Sortables to be able to drag these modules into place (back and forth across the three sections of content). I even have logic to remove elements from content if their number or combined width exceeds the content of available slots / widths.

All this works fine in FF3, IE7, Safari ... but is there a known problem with this library with IE6? I mean that objects become invisible, they are dragged to the side when dragging, they put the assistant in the wrong place .. and my client asked me to specially configure it for IE6. Has anyone experienced these behaviors before using this library?

Thanx in advance.

(I would paste the code, but all references and variables are in Spanish .. I will translate them if necessary)

Answer 1

It is impossible to give you a complete answer without html and css. But I know that many problems with IE6 when implementing jQuery UI sort / drag functionality were resolved by making sure that the elements have a “layout” in IE6. Here is a good article on layout issue in IE .

For my purposes, I ended up adding a conditional css script for IE6 with the following css that applies to my sortable list:

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

Answer 2

This is because your page is rendering in Quirks mode. Just add the css zoom: 1 property of the elements. This should solve the problem.

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: Put this in IE conditional hack

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

Answer 3

Sorry guys .. did not have time to explain further, since we were close to a dead end. Here is what I use:

There are three divs with the class '.groupWrapper' applied to them, #listaUno #listaDos #listaInicial. There are two types of div modules: all floating on the left, with different widths of 167x159 and 342x159, and #listaUno containers have a set width of 346px (can contain two small modules or one large), and #listaDos has 690px (up to four small modules).

Using sorters from 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. } 

This works very well on FireFox, IE7, Safari, etc., but on IE6 elements that are being dragged do some overloaded things under other page elements or are connected to the mouse, but at a distance of 500 pixels from it, other messy things ..