jQuery ui діалогове перетягування проблем

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

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

Більш конкретно, я знайшов, якщо я скинув сторінку хостингу на 100 пікселів (так що верхній 100 пікселів хостингової сторінки є "каналом" у верхній частині вікна браузера), тоді, коли я перетягую діалогове вікно, замість того, щоб слідувати за ним, він стрибає вниз на 100 пікселів так, щоб вона була поза захопленням миші.

Діалогове вікно буде перенаправлено як

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

Моя питання полягає в наступному: 1) чи має хто-небудь ще одну й ту саму проблему? 2) Якщо так, це проблема налаштування або помилка.

Будь-який експерт тут може мені допомогти?

22
Принаймні, надішліть пряму посилання.
додано Автор Sergio, джерело
Спробуйте бути способом більш конкретним, коли опишіть проблему. Потрібно подумати про надання скрипці , яка показує, що ви відчуваєте. Ви не можете просто сказати " він починає стрибати навколо " і очікує від нас розуміння проблеми з технічної точки зору. Ви намагаєтеся використовувати опцію containment ? Давайте побачимо ваш код.
додано Автор jahroy, джерело
Ви можете вибрати з безлічі різних версій jQuery у випадаючому меню з лівого боку в розділі "Основи та розширення" (перше, що є на сторінці).
додано Автор jahroy, джерело
Який тип CSS задіяний? Це було б перше місце, яким я виглядаю ... Я б граю з jsFiddle (або іншими варіантами ). Коли ви намагаєтеся зібрати відтворюваний приклад, ви, ймовірно, наткнетеся на частину коду, що викликає це.
додано Автор jahroy, джерело
Я думаю, у вас є якась фіксована позиція у стилі, застосованому до вашого перемішаного розділу. Це дуже легко грати з html, CSS та JavaScipt на jsFiddle. Посилання вище також пропонує багато варіантів, які легко вчитися (і насправді весело). Також перевірте Firebug.
додано Автор jahroy, джерело
як нас кодуть
додано Автор Avinash R, джерело
Firebug - це мій стандартний налагоджувач для веб-сторінок. Я в даний час вивчаю стилі draggable і не знайшов жодної фіксованої позиції в даний час, я спробую очистити сторінку, щоб побачити, чи проблема не зникне.
додано Автор SFD - jinan, джерело
Гаразд, я спробую це пізніше, дякую
додано Автор SFD - jinan, джерело
В основному всі jQuery-ui, плюс jquery.qtip один і наш власний css. Я буду дивитись, якщо у нас є помилки в наших власних CSS-файлах. Але, з показаної поведінки, здається, що lib не розглядає/не розрізняє верхню частину вікна або документ верхній правильно, просто здогадатися, я міг би помилятися ...
додано Автор SFD - jinan, джерело
Сторінка динамічно генерується, складна і має бути довгою. Не знайомий з скрипкою, схоже, для jQuery-ui немає вибору.
додано Автор SFD - jinan, джерело

6 Відповіді

У мене теж одна проблема, вміст на сторінці створюється автоматично. Це дуже довго.

html, body {position: relative} solves the problem.

30
додано
Дякую, але це дуже дивно. У мене було 1.10.4 та html, body {position: relative} і зіткнулися з цією помилкою. Помилка вирішена після прочитання цього повідомлення. Я спробував видалити position: relative з html і body , і проблема не була зроблена.
додано Автор ivkremer, джерело
це також фіксує наше питання +1
додано Автор M.Bush, джерело
У мене виникла проблема з 1.10.4. Це фіксувало його без помітних побічних ефектів.
додано Автор nunzabar, джерело
Вау, я напевно здивований тим, що працював. Виправлення CSS вирішило моє питання в IE8 + і Firefox для jqueryUI 1.10.3 та jQuery 1.9.1.
додано Автор anataliocs, джерело
Додано "відносний", вирішено для v1.10.2
додано Автор nerkn, джерело
Це працювало для мене :)
додано Автор dividedbyzero, джерело

Гаразд, я виявив, що це помилка в jQuery-ui 1.10.3, див. Тут :

Це з'являється тільки з використанням інтерфейсу користувача 1.10.3 і коли смужка прокрутки не є   на самому верху в Firefox, Opera, IE8.

     

У Chrome працює нормально, а також з 1.10.2 в інших браузерах.

     

Сторінка демонстраційного інтерфейсу користувача має таку помилку:

     

перетягніть діалогове вікно до появи панелі прокрутки, прокрутіть вниз ще раз   перетягніть діалогове вікно вниз. Діалогове вікно збігається зі зміщенням

10
додано
Тобто, діалогове вікно, здається, переживає абсолютні та відносні координати сторінки.
додано Автор AtliB, джерело
У мене насправді була одна проблема з 1.10.2 і 1.11.0. Це не відбувається, коли ви перетягуєте діалогове вікно, якщо нижня сторінка знаходиться у верхній позиції (вертикальна смуга прокрутки у верхній позиції). Однак, якщо ви трохи прокрутити вниз і відкрити діалогове вікно, а потім спробувати перемістити його, воно буде стрибати приблизно однаковою довжиною, оскільки ви прокрутили сторінку.
додано Автор AtliB, джерело
+1, це насправді відбувається в інтерфейсі користувача jQuery зразком сторінки діалогового вікна , якщо ви вводите вертикальний скроллер у контейнері.
додано Автор Alex, джерело
@ Алекс, приємно спіймати Швидке рішення - використовувати, якщо це можливо, 1.10.2.
додано Автор User 00000, джерело

Моє рішення для виправлення цієї помилки подібне до 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

5
додано
Я використовую вершину 5.0, інтегровану з jQueryUI 1.10.4. Також там виправлено вашу проблему.
додано Автор jareeq, джерело

Я думаю, є помилка. Я також зіткнувся з цією проблемою. Моє рішення для виправлення цього, щоб вимкнути перетягування. Просто перетягніть помилково. Подобається це:

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

Update the jQuery UI Library (js) worked for me. http://jqueryui.com/download/
Remember to update your CSS files too.

1
додано

Bugreport: view bug report

Моє рішення для виправлення цієї помилки - "скинути" "ui.position.top" (для мене 228 пікселів).

$(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

Це рішення працює для мене. Сподіваюсь, це допоможе тобі, доки не буде виправлена ​​помилка.

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram