4

我的第一个问题。

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

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

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

提前谢谢。

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

4

3 回答 3

3

没有你的 html 和 css 就不可能给你一个完整的答案。但我确实知道，在实现 jQuery UI 的可排序/可拖动功能时，我的许多 IE6 问题都是通过确保元素在 IE6 中具有“布局”来解决的。这是一篇关于 IE 中布局问题的好文章。

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

/* Gives layout to elements in IE6, similar to zoom: 1; in IE7 */
#fields, #fields li {
    height: 0;
}
于 2009-11-05T04:28:34.767 回答
1

这是因为您的页面正在以 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 条件破解中

ul.mysortable,
ul.mysortable ul,
ul.mysortable li{
   zoom:1;
}
于 2010-07-20T11:42:16.040 回答
0

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

有三个 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 上，被拖动的元素，在其他页面元素下做一些跳跃的东西，或者链接到鼠标但距离它 500 像素，以及不同的其他混乱的东西..

于 2009-05-19T10:16:34.793 回答