jQuery UI Сортируемая проблема на IE6 - PullRequest
Новая
       27

jQuery UI Сортируемая проблема на IE6

4 голосов
/ 13 мая 2009

первый вопрос здесь от меня.

У нас есть страница настройки пользователей, которая дает им возможность перемещать разные модули () в три разных блока контента. Существует два содержимого пространства и четыре пространства содержимого, а затем пул неиспользуемых модулей.

Я использую Sortables, чтобы иметь возможность перетаскивать эти модули на свои места (туда и обратно по трем элементам содержимого). У меня даже есть логика для удаления элементов из содержимого, если их число или объединенная ширина превышает содержимое доступных слотов / ширину.

Все это прекрасно работает в FF3, IE7, Safari ... но есть ли известная проблема с этой библиотекой в ​​IE6? Я имею в виду, что элементы становятся невидимыми, перемещаются в сторону при перетаскивании, сбрасывают помощника в неправильном месте ... и мой клиент специально попросил заставить его работать на IE6. Кто-нибудь сталкивался с подобным поведением перед использованием этой библиотеки?

Спасибо заранее.

(я бы вставил код, но все ссылки и переменные на испанском языке .. я переведу их при необходимости)

Ответы [ 3 ]

3 голосов
/ 05 ноября 2009

Невозможно дать вам полный ответ без вашего HTML и CSS. Но я знаю, что многие из моих проблем с IE6 при реализации функции сортировки / перетаскивания пользовательского интерфейса jQuery были решены путем обеспечения того, что элементы имеют «макет» в IE6. Вот хорошая статья о разметке в IE .

Для моих целей я добавил условный скрипт css для IE6 со следующим css, который применяется к моему сортируемому списку: 

/* Gives layout to elements in IE6, similar to zoom: 1; in IE7 */
#fields, #fields li {
    height: 0;
}
1 голос
/ 20 июля 2010

Это потому, что ваша страница отображается в режиме 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;
}
0 голосов
/ 19 мая 2009

Извините, ребята ... не было времени, чтобы объяснить дальше, так как мы были близки к тупику. Вот что я использую:

Существует три элемента div с примененным к ним классом .groupWrapper, #listaUno #listaDos #listaInicial. Существует два вида модулей 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 пикселей от нее, и другие другие грязные вещи ..

...