Сделайте все модальности начальной загрузки перетаскиваемыми с помощью пользовательского интерфейса Jquery

0

Я прочитал сообщение о том, как сделать загрузочные модальности Draggrap, которые я могу сделать, позвонив:

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

Там, где диалог создается на странице.

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

Есть ли способ перетащить все диалоги по умолчанию?

Я пытался:

$('.modal').on('show', function(){
  $(this).draggable({
      handle: ".modal-header"
    });
})

В моем глобальном скрипте, но он ничего не делает.

Теги:
modal-dialog
draggable

2 ответа

0
Лучший ответ

Попробуй:

$(document).ready(function() {
    $(".modal").each(function(i) {
        $(this).draggable({
            handle: ".modal-header"  
        });
    });
});

ОБНОВИТЬ

Чтобы использовать перетаскиваемый плагин для использования динамически созданного элемента

(function ($) {
   $.fn.dynamicDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
      return this;
   };
}(jQuery));

И используйте его как

$(".modal").dynamicDraggable({
     handle: ".modal-header"  
});
Поделиться
  • 0
    Это запустится до того, как какие-либо диалоги будут введены в DOM.
  • 0
    Проблема в том, что разметка для диалогов не существует и динамически добавляется в DOM. С другой стороны, лучше ли вообще, чтобы все диалоговые окна, которые могли бы использоваться на странице, были уже в DOM и скрыты, без динамической загрузки HTML?
Показать ещё 1 комментарий
0

Это сработало для меня:

$('.modal').draggable({
    handle: ".modal-content"  
});

Это найдет все элементы html с классом modal и сделает их перетаскиваемыми.

Я использовал ".modal-content" вместо "modal-header", потому что я не хочу, чтобы пользователи застревали, если они слишком сильно тащили модальный экран. С ".modal-content" они могут перетащить его обратно со дна модального.

Обратите внимание, что для этого вам необходимо использовать JQuery UI.

Используйте document.ready(), чтобы все модалы были загружены до применения этого кода.

Если вы используете AngularJS, как я, и имеете несколько контроллеров и представлений, или не все ваши модальности доступны в DOM изначально, вы можете использовать ng-init для каждого модального div, чтобы вызвать функцию, которая заставляет их перетаскивать.

HTML:

<div class="modal" ng-init="makeDraggable()">

Javascript:

$rootScope.makeDraggable = function () {
            $('.modal').draggable({
                handle: ".modal-content"
            });
            $('.modal').addClass('click');
        };
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню