Question

我在这里提出第一个问题。

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

我正在使用Sortables来拖动和放大将这些模块放到位（来回三个内容div）。如果数字或组合宽度超过可用插槽/宽度的内容，我甚至有从内容中删除项目的逻辑。

所有这些在FF3，IE7，Safari中运行良好......但是，这个库与IE6有一个已知的问题吗？我的意思是，项目变得不可见，被拖动时移动到一侧，将帮助器放在错误的位置......我的客户已经特别要求它在IE6上运行。在使用这个库之前，有没有人经历过这种行为？

提前完成。

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

Answer 1

没有你的HTML和CSS，你不可能给你一个完整的答案。但我知道在实现jQuery UI的可排序/可拖动功能时，我的很多IE6问题都是通过确保元素在IE6中具有“布局”来解决的。 Here's a good article on the layout issue in IE

出于我的目的，我最终为IE6添加了一个条件css脚本，其中包含以下应用于我的可排序列表的css：

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

Answer 2

这是因为您的页面以Quirks模式呈现。只需添加css zoom：1 propery到元素。这应该可以解决这个问题。

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条件黑客中

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

Answer 3

对不起，伙计们......没有时间进一步解释，因为我们接近死路一条。这是我正在使用的：

有三个div应用了'.groupWrapper'类，＃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上，拖动的元素，在其他页面元素下做一些跳跃的东西，或者链接到鼠标但距离它500px，并且不同其他杂乱的东西..

IE6上的jQuery UI可排序问题

3 个答案: