Изменяемая ограничивающая рамка сдерживания пользовательского интерфейса JQuery - PullRequest
Новая
       33

Изменяемая ограничивающая рамка сдерживания пользовательского интерфейса JQuery

0 голосов
/ 03 октября 2018

Я надеюсь, что есть способ установить ограничивающую рамку содержания в пикселях, а не HTML-элемент.Я нашел пост с Draggable примером того же самого, их пример выглядел так: 

$( "#img" ).draggable({ containment: [x1, y1, x2, y2] });

Я попробовал то же самое с изменяемым размером, что привело к ошибке: 

"Uncaught TypeError: Cannot read property 'defaultView' of undefined"

Есть ли подобный синтаксис, который будет работать с изменяемым размером?Единственными вещами, которые я смог найти, было ограничение: HTML_ELEMENT, а также maxWidth, maxHeight, minWidth, minHeight.

Моя цель состоит в том, чтобы поместить в элемент изменения размера в определенном количестве пикселей от краясодержащий элемент.

Спасибо всем за ваше время

1 Ответ

0 голосов
/ 10 июня 2019

Вы можете просто установить опции maxWidth, minWidth, maxheight, minHeight для элемента с изменяемыми размерами в функции start изменяемого размера, или вы можете установить минимальные и максимальные значения для элемента с помощью css. 

$('.widget1').resizable();

var minW = 50;
var maxW = 200;
var minH = 50;
var maxH = 200;

$('.widget2').resizable({
  start: function(e, ui) {
    var minWidth = $(this).resizable("option", "minWidth", minW);
    var maxWidth = $(this).resizable("option", "maxWidth", maxW);
    var minHeight = $(this).resizable("option", "minHeight", minH);
    var maxHeight = $(this).resizable("option", "maxHeight", maxH);
  }
});
.container {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
}

.widget {
  min-width: 50px;
  width: 50px;
  min-height: 50px;
  height: 50px;
  background: #ccc;
  position: relative;
  margin: 10px;
  display: inline-block;
}

.widget1 {
  max-height: 200px;
  max-width: 200px;
}

.ui-resizable-se {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="widget1 widget"></div>

<div class="widget2 widget"></div>
...