代码之家 › 专栏 › 技术社区 › elQueFaltaba

IE6上的jQuery UI可排序问题

jquery-ui-sortable jquery-ui jquery

elQueFaltaba · 技术社区 · 17 年前

我的第一个问题。

我们有一个用户定制页面,可以将不同的模块()重新定位到三个不同的内容块中。有两个空格内容和一个四空格内容,然后是一个未使用的模块池。

我使用排序表来拖动&将这些模块放置到位(在三个内容div之间来回移动)。我甚至有逻辑从内容中删除项目,如果它们的数量或组合宽度超过了可用的内容槽/宽度。

所有这些在FF3、IE7、Safari中都可以正常工作。。。但是,这个IE6库是否存在已知问题?我的意思是,项目变得不可见,拖动时移动到一边,将助手放置在错误的位置。。我的客户特别要求在IE6上使用它。在使用此库之前,是否有人经历过此类行为?

提前准备好。

(我本来会粘贴代码,但所有引用和变量都是西班牙语的。如果需要,我会翻译它们)

3 回复 | 直到 17 年前

Lance McNearney 16 年前

如果没有html和css,就不可能给出完整的答案。但我知道,在实现jQueryUI的可排序/可拖动功能时,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;
}

nairvijays 16 年前

这是因为您的页面是在“怪癖”模式下呈现的。只需将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条件黑客中

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

elQueFaltaba 17 年前

对不起,伙计们。。没有时间进一步解释,因为我们已经接近死胡同了。以下是我正在使用的:

有三个带“的div。应用于它们的groupWrapper类是#listaUno#listaDos#listainical。有两种div模块,都浮动在左侧,宽度基本不同,167x159和342x159,容器#listaUno的设置宽度为346px(可以容纳两个小模块或一个大模块),而#listaDos的设置宽度为690px(最多四个小模块)。

使用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.
}

这在FireFox、IE7、Safari等上运行得非常好。。。但是在IE6上,被拖动的元素,在其他页面元素下做一些跳跃的事情,或者链接到鼠标,但离鼠标500像素远,以及其他不同的凌乱的东西。。