Блог

Главная - Вопросы по программированию - Как ограничить направление изменения размера контейнера с помощью мыши

Как ограничить направление изменения размера контейнера с помощью мыши

#javascript #html #css

Вопрос:

У меня есть контейнер, размер которого можно изменять с right-side и bottom .

Он изменяется правильно, но в обе стороны, то есть в и в то же время в неограниченной длине . height width

Может ли быть способ ограничить направление изменения размера либо с нижней, либо с правой стороны увеличением или уменьшением размера .

Одностороннее увеличение возможно только при использовании 1 условия в if

Вот код :

 const panel = document.getElementById("styleChangeOuterTag");
let m_pos;
let m_pos1;

function resize(e) {
  const dx = m_pos - e.x;
  const dy = m_pos1 - e.y;
  m_pos = e.x;
  m_pos1 = e.y;
  panel.style.width = (parseInt(getComputedStyle(panel).width) - dx)   "px";
  panel.style.height = (parseInt(getComputedStyle(panel).height) - dy)   "px";
}

panel.addEventListener("mousedown", function(e) {
  if (e.offsetX > panel.clientWidth - 10) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize);
  } else if (e.offsetY > panel.clientHeight - 10) {
    m_pos1 = e.y;
    document.addEventListener("mousemove", resize);
  }
});

document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", resize);
}); 
 #styleChangeOuterTag {
  /* display: none; */
  /* position: fixed; */
  position: relative;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  padding: 2vw 1.5vw;
  background-color: rgb(255, 245, 245);
  border: 2px solid rgb(255, 60, 255);
  border-radius: 3px;
  z-index: 5;
  user-select: none;
}

#styleChangeOuterTag::after {
  content: '';
  background-color: #ccc;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
}

#styleChangeOuterTag::before {
  content: '';
  background-color: #ccc;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 10px;
  cursor: ns-resize;
}

#styleOptionDetails {
  border: 2px solid purple;
  border-radius: 3px;
  padding: 1vw;
  overflow: auto;
} 
 <div id="styleChangeOuterTag">
  <hr>
  <div id="styleOptionDetails">
  </div>
</div>

Можете ли вы рассказать о том, как изменить размер кликабельной ширины(серая часть в контейнере-которая вызывает изменение размера), так как теперь она не подходит по размеру и не работает во всю ширину

создано с помощью e.offsetX > panel.clientWidth — 10

Заранее спасибо за помощь

Комментарии:

1. Вы пробовали добавить max-height и max-width в контейнер с возможностью изменения размера в CSS?

2. Это сработало отлично @Sarah спасибо за это . Можете ли вы рассказать об изменении размера в одном направлении

3. Вы можете установить min-height , а min-width также разрешить ему становиться таким маленьким.

4. Да, это просто вылетело у меня из головы . Это проще и надежнее, чем любое другое JS решение @Sarah

Ответ №1:

Вы можете добавить дополнительное условие в свою resize функцию, что-то вроде этого:

 const minWidth = 150
const maxWidth = 500
const minHeight = 150
const maxHeight = 500

function resize(e) {
  const dx = m_pos - e.x;
  const dy = m_pos1 - e.y;
  m_pos = e.x;
  m_pos1 = e.y;

  const newWidth = parseInt(getComputedStyle(panel).width) - dx
  const newHeight = parseInt(getComputedStyle(panel).height - dy

  if (newWidth > minWidth amp;amp; newWidth < maxWidth) {
    panel.style.width = newWidth   "px";
  }
  if (newHeight > minHeight amp;amp; newHeight < maxHeight) {
    panel.style.height = newHeight   "px";
  }
}

Комментарии:

1. Можно ли увеличить размер только в одном направлении за один раз

2. Вы можете добавить 2 дополнительных html-элемента , которые будут располагаться поверх ваших panel и которые будут обрабатывать события мыши, один для изменения размера по ширине, а второй для изменения размера по высоте. И разделите свою resize функцию на resizeX и resizeY . Большая часть остального кода будет такой же.

3. Большое спасибо, Куззи , это означает, что это невозможно с помощью одной функции, я прав или есть какой-либо другой способ

4. Можете ли вы рассказать о том, как изменить размер кликабельной ширины(серая часть в контейнере), так как теперь она не подходит по размеру и не работает во всю ширину

5. Я не уверен, правильно ли я понимаю вопрос, но вы можете изменить ширину серых полос в css: #styleChangeOuterTag::after { width: yourNewWidth } для правой полосы и #styleChangeOuterTag::before { height: yourNewHeight } для нижней. И изменять условия в JS e.offsetX > panel.clientWidth - yourNewWidth и e.offsetY > panel.clientHeight - yourNewHeight .

Метки: