Как реализовать функцию изменения высоты объекта при движении мыши?

Question

[n1ksON]

Необходимо, чтобы при нажатии на объект срабатывала функция, так чтобы при опускании мыши на 1px вниз, высота объекта увеличивалась на 1px и с уменьшением аналогично.

$('.hr-edit').hover(function() {
        $('.hr-edit').mousedown(function(m) {
            let moveY = m.pageY + 1;  // подразумевал, что будет срабатывать как изменение координат. 
            let height = moveY + 290; // само изменение плюс изначальная высота объекта
            $('.first-el-header').css('height', height + 'px');
        });
    });

На данный момент, при нажатии на кнопку просто к высоте добавляется 290px.
Буду очень благодарен, если поможете реализовать данную функцию.

Comments

[fixeri]

html?

[n1ksON]

fixeri, в смысле?

Answer 1

[0xD34F]

<div class="xxx">hello, world!!</div>
<div class="xxx">fuck the world</div>
<div class="xxx">fuck everything</div>

.xxx {
  padding: 10px;
  margin: 10px;
  border: 1px solid silver;
}

let el = null;

document.addEventListener('mousedown', e => el = e.target.closest('.xxx'));
document.addEventListener('mouseup', e => el = null);

document.addEventListener('mousemove', e => {
  if (el) {
    const height = parseInt(getComputedStyle(el).height);
    el.style.height = `${height + e.movementY}px`;
  }
});

https://jsfiddle.net/eu6s3b42/

Comments

[n1ksON]

Супер, а можно объяснить как это работает?)
И как добавить минимальную высоту? Например, чтобы высота блока не могла стать меньше, чем высота текста, находящегося внутри.

[0xD34F]

n1ksON, попробуйте сперва ответить на этот вопрос самостоятельно. Видите в коде что-то незнакомое - гуглите это.

Минимальная высота - Math.max вам в помощь.

[n1ksON]

0xD34F, осталось не понятно только, как работает if без условия. Можете подсказать, что значит в данном случае if (el) {}?

[0xD34F]

n1ksON, https://learn.javascript.ru/ifelse#preobrazovanie-...

[n1ksON]

0xD34F, спасибо