JQuery UI - предотвратить изменение размера диалога вне родительского div - PullRequest
Новая
       50

JQuery UI - предотвратить изменение размера диалога вне родительского div

0 голосов
/ 13 ноября 2018

ПРОБЛЕМА: При изменении размера диалога я хочу, чтобы он не выходил за пределы родительского div dialog-container. По какой-то причине containment не работает, как я ожидал. Что еще я могу попробовать?

enter image description here

HTML: 

<div id="top"></div>
<div id="dialog-container">
  <div id="dialog">My dialog</div>
</div>

JS: 

$(document).ready(function() {
    jQuery("#dialog").dialog({
                            autoOpen:true,
                            modal: false,
                            resizable: true,
                            draggable: true,
                            closeOnEscape: true,
                            title: "Title",
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    }).parent().draggable({
        containment: '#dialog-container'
    }).resizable({
        containment: '#dialog-container'
    });
});

JSFIDDLE: https://jsfiddle.net/4zfmbktr/

1 Ответ

0 голосов
/ 14 ноября 2018

Во-первых, я бы СИЛЬНО посоветовал перейти на более новую библиотеку пользовательского интерфейса jQuery. Я обнаружил много странных проблем с выбранным в вашей скрипке jQuery UI 1.8.18.

Одна из вещей, которые я обнаружил, заключалась в том, что он игнорировал options, примененный к изменяемым размерам. Если вы прочитаете эту статью , она говорит о том, как установить эту опцию. Перейдите к началу ответа Джейсона С. Так вот, с чего я начал:

JavaScript 

$(function() {
  $("#dialog").dialog({
    autoOpen: true,
    modal: false,
    resizable: false,
    draggable: true,
    closeOnEscape: true,
    title: "Title",
    open: function() {
      $('.ui-widget-overlay').bind('click', function() {
        $('#dialog').dialog('close');
      })
    }
  });
  var ui = $("#dialog").closest(".ui-dialog");
  ui.draggable("option", "containment", '#dialog-container');
  ui.resizable("option", "containment", '#dialog-container');
});

Это не сработало. Перетаскиваемое удержание сработало, но изменение размера удержания не удалось. Я виню 1.8.18. Я мог бы проверить это снова с современным 1.12.1, просто чтобы увидеть.

Это не означает, что вы не можете использовать 1.8.18, если вы не можете изменить свою библиотеку, вот обходной путь. Здесь есть предостережения.

Рабочий пример: https://jsfiddle.net/Twisty/2vaf3dr5/39/

JavaScript 

$(function() {
  $("#dialog").dialog({
    autoOpen: true,
    modal: false,
    resizable: false,
    draggable: true,
    closeOnEscape: true,
    title: "Title",
    open: function() {
      $('.ui-widget-overlay').bind('click', function() {
        $('#dialog').dialog('close');
      })
    }
  });
  var ui = $("#dialog").closest(".ui-dialog");
  ui.draggable("option", "containment", '#dialog-container');
  ui.resizable({
    handles: "n, e, s, w, se",
    minHeight: 150,
    minWidth: 150,
    resize: function(e, ui) {
      var contPos = $("#dialog-container").position();
      contPos.bottom = contPos.top + $("#dialog-container").height();
      contPos.right = contPos.left + $("#dialog-container").width();
      contPos.height = $("#dialog-container").height();
      contPos.width = $("#dialog-container").width();
      if (ui.position.top <= contPos.top) {
        ui.position.top = contPos.top + 1;
      }
      if (ui.position.left <= contPos.left) {
        ui.position.left = contPos.left + 1;
      }
      if (ui.size.height >= contPos.height) {
        ui.size.height = contPos.height - 7;
      }
      if (ui.size.width >= contPos.width) {
        ui.size.width = contPos.width - 7;
      }
    }
  });
});

Я убрал предварительно настроенную опцию изменения размера в диалоге и выписал опции напрямую. Опять же, сдерживание здесь не сработало, поэтому мне пришлось сделать свою собственную логику изменения размера. В конце концов, это то, что вы ожидаете.

Одна из странностей или предостережений заключается в том, что он читает движение мыши и будет продолжать это делать, даже если мышь превысила границы. Так что верх и левая остановка ... но ширина и высота продолжают расти. Я не знаю почему, и вы знаете, куда я укажу палец.

Я попытался переключить ваши библиотеки, и изменение размера ... немного лучше. Все еще странно с высотой, но не с шириной. Смотрите здесь: https://jsfiddle.net/Twisty/2vaf3dr5/44/

Это должно помочь вам, надеюсь, это поможет.

...