Проблемы с перетаскиванием диалогового окна jQuery ui

Я использовал jQuery ui (jquery-ui-1.10.3) диалог pluggin для одного из наших продуктов и нашел возможную "проблему": Когда страница хостинга мала или текущий просмотр страницы хостинга прокручивается вверх, перетаскивание открытого диалогового окна ведет себя так, как ожидается. Проблема начинает проявляться при размещении диалога на большой странице, которая прокручивается где-то не вверху, и в этом случае диалоговое окно начинает прыгать во время перетаскивания. Это происходит как с IE 9, так и с последним Firefox (21.0).

Страница динамически генерируется, сложна и должна быть длинной. Я не знаком с скрипкой, но, похоже, у меня нет опции для jQuery-ui lib, которую я могу использовать.

В частности, я обнаружил, что если я сниму страницу 100px для хостинга (так что верхняя 100px страницы хостинга - "фид" в верхней границе окна браузера), тогда, когда я перетаскиваю диалог, а не следую за мышь, он прыгает вниз на 100 пикселей, чтобы он не был захвачен мышью.

Диалог инициализируется как

$(element).dialog({ 
    autoOpen: false, width: 950, height: 820, 
    modal: false, resizable: true, draggable: true
});

Мой вопрос: 1) есть ли у кого-то еще одна проблема? 2) Если да, это проблема с установкой или ошибка.

Любой специалист здесь может помочь мне с этим?

Ответ 1

У меня была одна и та же проблема, содержимое на странице генерируется автоматически. Это очень долго.

html, body {position: relative} решает проблему.

Ответ 2

Хорошо, я обнаружил, что это ошибка jQuery-ui 1.10.3, см. здесь:

Это появляется только при использовании UI 1.10.3 и когда полоса прокрутки не на самом верху в Firefox, Opera, IE8.

В Chrome работает отлично, а также с 1.10.2 в других браузерах.

На странице демоверсии диалогового окна также есть эта ошибка:

перетащите диалог вниз, пока не появится прокрутка полосы прокрутки вниз перетащите диалог вниз. диалог со смещением

Ответ 3

Мое решение исправить эту ошибку аналогично решению Dado, но с использованием события перетаскивания:

        $(element).dialog({
            draggable: true,
            drag: function(event, ui) {
                var fixPix = $(document).scrollTop();
                iObj = ui.position;
                iObj.top = iObj.top - fixPix;
                $(this).closest(".ui-dialog").css("top", iObj.top + "px");
            }
        });

Моя версия: jQuery UI - v1.10.3 - 2013-10-10

Ответ 4

Я думаю, что есть ошибка. Я тоже столкнулся с этой проблемой. Мое решение для исправления этого, чтобы отключить перетаскивание. Просто сделайте draggable false. Вот так:

$(element).dialog({ 
    autoOpen: false, width: 950, height: 820, 
    modal: false, resizable: true, draggable: false
});

Ответ 5

Обновление библиотеки jQuery UI (js) работало для меня. http://jqueryui.com/download/
Не забудьте также обновить файлы css.

Ответ 6

Bugreport: просмотреть отчет об ошибке

Мое решение исправить эту ошибку - "reset" "ui.position.top" (для меня 228px).

$(element).dialog({
    dragStart: function(event, ui) {
        var fixPix = 228; // offset top (add your own here!)
        iObj = ui.position;
        if (iObj.top > fixPix) {
            iObj.top = iObj.top - fixPix;
        }
        ui.position = iObj;
    }
});

Моя версия: jQuery UI - v1.10.4 - 2014-01-17

Это решение работает для меня. Надеюсь, это поможет вам, пока эта уродливая ошибка не будет исправлена.