it-roy-ru.com

Dragable JS Bootstrap модальный - проблемы с производительностью

Для работающего проекта мы используем Bootstrap Модальные окна в JavaScript. Мы хотели бы сделать некоторые окна подвижными, но у нас возникают проблемы с производительностью в JQuery.

$("#myModal").draggable({
    handle: ".modal-header"
});

Пример ,
Источник .
В IE9 все работает как положено.
В Chrome горизонтальное перетаскивание работает, как и ожидалось, а вертикальное перетаскивание довольно медленное, но не проблематичное.
В Firefox горизонтальное перетаскивание работает, как и ожидалось, но вертикальное перетаскивание происходит крайне медленно.

Это странно, потому что пример окна не является графически тяжелым, и JQuery должен нормализовать поведение браузера. Я попытался решить эту проблему без использования перетаскиваемого JQuery, но столкнулся с той же проблемой.

Итак, у меня есть пара вопросов:

  • Является ли низкая производительность ошибкой браузера, JQuery, Bootstrap или мой код не оптимален?
  • Почему существует разница между горизонтальным и вертикальным перетаскиванием?
  • Должен ли я найти обходной путь или просто избегать Bootstrap вообще для динамических всплывающих окон?

С уважением, Гвидо

9
Jodiug

Я нашел несколько способов исправить это.

Добавление этого в ваш CSS-файл отключит эффекты transition во время перетаскивания модального окна. Однако оказывается, что, как только пользователь перетаскивает окно, всплывающее окно не будет происходить правильно, а скорее просто исчезнет.

.modal.fade.ui-draggable-dragging {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

В качестве альтернативы добавление следующего к вашему CSS-файлу и классу nofly к вашей модели отключит объединение всех элементов вместе, но не затухание:

.modal.fade.nofly {
    top: 10%;        
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
11
bbodenmiller

Я обнаружил, что в bootstrap 3 мне пришлось переопределить эти свойства css модального диалога:

.modal
{
    overflow: hidden;
    bottom: auto;
    right: auto;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}

Fiddle

Полноэкранное демо

5
David Wilton

Это не совсем отвечает на ваши вопросы, но вы можете попытаться отключить свойства *-transition или уменьшить значение времени по сравнению с указанным 0.3s. Это определено в .modal.fade. Но это также испортит начальную анимацию всплывающих окон. Если это неприемлемо, вы можете использовать событие start в виджете draggable, чтобы применить новый стиль.

2
lunr

С Bootstrap 3.3 и jQuery UI 1.1 я добавляю класс с именем "modal-draggable" к элементу с классом "modal".

Он привязывается к элементу .modal-dialog внутри контейнеров с классом .modal-draggable (в отличие от некоторых примеров, которые здесь привязываются к фактическому контейнеру).

Существует немного CSS, поэтому прокрутка для длинных диалогов по-прежнему работает на устройствах всех размеров экрана.

CSS:

.modal-draggable .modal-backdrop {
  position: fixed;
}

.modal.modal-draggable {
    overflow: overflow-y;
}

.modal-draggable .modal-header:hover {
  cursor: move;
}

JavaScript:

$(".modal-draggable .modal-dialog").draggable({
  handle: ".modal-header"
});

Смотрите демонстрационную версию JS Fiddle здесь: http://jsfiddle.net/jcosnn6u/3/

Примечание: до сих пор я проверял это только в Chrome, Firefox и Safari и мобильных устройствах, поэтому не могу комментировать совместимость с Internet Explorer.

1
Iain Collins

Я предпочитаю использовать jqueryui. Подробнее о перетаскиваемом API здесь: http://api.jqueryui.com/draggable/

0
luongnv89

Хотя предложенные изменения CSS работали для меня, мне не нравилось, что диалоговое окно показывалось слева первоначально. Обновление пользовательского интерфейса jquery с 1.9 до 1.11 устранило проблему, с которой я столкнулся

0
Doogal