jQuery UI Sortable problem on IE6

Question

Hello there, first question here from me.

We have a users customization page which gives them the possibility to relocate different modules () into three different content blocks. There is two space content, and a four space content, then a pool of unused modules to use.

I'm using Sortables to be able to drag & drop these modules into place (back and forth the three content divs). I even have the logic to remove items from the contents if their numbers or combined widths exceed the contents available slots/width.

All this is working fine in FF3, IE7, Safari ... but, is there a known problem with this library with IE6? I mean, items gets invisible, gets moved to a side when dragged, drops the helper in the wrong place .. and my client has asked specifically to make it work on IE6. Have any one experienced this kind of behaviours before using this library?

Thanx in advance.

(I would have pasted the code, but all references and variables are in spanish .. i'll translate them if needed)

Answer 1

Sorry guys .. had no time to explain further, since we were close to dead end. Here's what i'm using:

There are three divs with the '.groupWrapper' class applied to them, #listaUno #listaDos #listaInicial . There are two kinds of div modules, all floated left, with basically different widths, 167x159 and 342x159, and the containers #listaUno has a set width of 346px (can hold two small modules or one big one), while #listaDos has 690px (up to four small modules).

Using Sortables from the 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 pretty well on FireFox, IE7, Safari, etc ... but on IE6, elements which are dragged, do some jumpy stuff under other page elements, or get linked to the mouse but 500px away from it, and different other messy stuff ..

Answer 2

I'm trying to solve something along these lines, haven't figured it out... but are there other items in the draggable elements that need to get events? There seems to be something funny about the way IE6 parcels out events...

Answer 3

It's impossible to give you a complete answer without your html and css. But I do know that a lot of my IE6 issues when implementing jQuery UI's sortable/draggable functionality were solved by making sure the elements had "layout" in IE6. Here's a good article on the layout issue in IE.

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

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

Answer 4

This is because your page is rendering in Quirks mode. Just add css zoom:1 propery to the elements. That should solve the issue.

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;
}