jQuery UI Sortable在IE6上的问题

Question

这是我的第一个问题。

我们有一个用户自定义页面，让他们可以将不同的模块（）重定位到三个不同的内容块中。有两个空间内容和一个四个空间内容，然后是一堆未使用的模块可供使用。

我正在使用 Sortables 来能够拖放这些模块到指定位置（在三个内容 div 之间来回拖放）。我甚至有逻辑来从内容中删除项目，如果它们的数量或组合宽度超过了内容可用的插槽数量/宽度。

所有这些在 FF3、IE7、Safari 中都运行良好，但是，是否已知该库在 IE6 中存在问题？我的意思是，项目变得不可见，被移到一边当拖动时，助手放置在错误的位置...我的客户特别要求在 IE6 上使其正常工作。在使用此库之前，有人经历过这种行为吗？

提前感谢您。

（我本来想粘贴代码的，但所有的引用和变量都是西班牙语...如果需要，我会翻译它们）

- elQueFaltaba

---

请发布您的HTML和Javascript代码，即使变量名称和函数是用西班牙语编写的。如果您发布了代码，您就更有可能得到答案。请注意，翻译保持内容原意的同时，使内容更加通俗易懂。 - ichiban

Answer 1

没有您的HTML和CSS，很难给您一个完整的答案。但是我知道，在实现jQuery UI的sortable/draggable功能时，我的很多IE6问题都得到了解决，这是因为确保元素在IE6中具有“layout”。这是一篇关于IE布局问题的好文章。对于我的用途，我最终添加了一个条件CSS脚本，其中包含应用于我的sortable列表的以下CSS：

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

- Lance McNearney

Answer 2

这是因为您的页面以 Quirks 模式呈现。只需向元素添加 css zoom:1 属性即可解决问题。

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：将此放入IE条件性Hack中

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

- nairvijays

Answer 3

抱歉，大家...我没有时间进一步解释，因为我们已经接近死路了。 这是我正在使用的：

有三个带有“.groupWrapper”类的div，#listaUno #listaDos #listaInicial。有两种不同宽度的div模块，都向左浮动，基本上分别为167x159和342x159，并且容器#listaUno具有346px的固定宽度（可以容纳两个小模块或一个大模块），而#listaDos则有690px（最多可容纳四个小模块）。

使用jQuery-UI中的Sortables..

$(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.
}

这在FireFox、IE7、Safari等浏览器上运行得非常好...但在IE6上，被拖动的元素会在其他页面元素下面跳动，或者与鼠标链接但距离鼠标500像素，还有其他混乱的问题...

- elQueFaltaba