Как реализовать изменяемый размер div с фиксированными приращениями в Javascript?

#javascript

Вопрос:

Я хочу реализовать div с изменяемым размером по вертикали таким образом, чтобы он увеличивал высоту с определенными фиксированными интервалами. Я не хочу использовать какие-либо библиотеки и ищу простую реализацию JS. Вот версия jquery:https://jqueryui.com/resizable/#snap-to-grid

Этот код работает хорошо, но увеличивает высоту на один пиксель при каждом перемещении мыши (по вертикали). Когда я пытаюсь увеличить высоту на 10, высота увеличивается, но указатель мыши не прилипает к основанию div..,

https://plnkr.co/edit/3VesixHE2B7N46f8N7Bg?p=preview

 const divElement = document.querySelector('.ns-resize');
const element = document.querySelector('.resizable');
let original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
let original_Y =  element.getBoundingClientRect().top;
divElement.onmousedown = function(mouseDownEvent) {
    mouseDownEvent.preventDefault();
    var original_mouse_y = mouseDownEvent.pageY;
    document.addEventListener('mousemove', resize);
    document.addEventListener('mouseup', stopResize);
    function resize(mouseUpEvent) {
        //cmp.increment = cmp.increment   15; 
        const height = original_height   (mouseUpEvent.pageY - original_mouse_y); 
        if (height > 15 amp;amp; height < 900) {
            mouseUpEvent.pageY = mouseUpEvent.pageY ; 
            element.style.height = height   'px';
            divElement.innerHTML = element.style.height;
            
        }
    }

    function stopResize() {
        document.removeEventListener('mousemove', resize)
      }

    
}

 /* Styles go here */

.resizable  {
    width: 100px; 
    height : 100px;
    border:1px solid red;
    position: absolute;
   
}
.container {
    position : relative;
}

.ns-resize {
    position: absolute;
    bottom: 0px;
    cursor: ns-resize;
    width: 100%;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body> 
        <div class="resizable">
            <div class="ns-resize">
                <span>amp;nbsp;</span>
            </div>
         </div>
    
    <script src="script.js"></script>
</body>
</html>

}

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

1. Я бы просто использовал правило css: resize: vertical; чтобы вы могли перетащить нижнюю часть div, а затем использовать событие onmouseup, чтобы изменить высоту div на ближайшие 10 пикселей от его текущей высоты.

Ответ №1:

Как указано в моем комментарии, CSS уже имеет свойство resize, которое вы можете использовать для изменения размера элемента. Единственное, что вам нужно сделать после изменения размера, это округлить текущую высоту до ближайших 10 пикселей.

 document.querySelector( '.resizable' ).addEventListener( 'mouseup', event => {
  const current_height = parseInt( event.target.style.height, 10 );
  event.target.style.height = Math.round( current_height / 10 ) * 10   'px';
  console.log( `changed height from ${ current_height }px to ${ event.target.style.height }` );
});

 .resizable {
  border: 1px solid red;
  height: 100px;
  overflow: hidden;
  resize: vertical;
  width: 100px;
}

 <div class="resizable"></div>

Только могучий хочет добавить проверку сейчас, чтобы не запускать функцию при нажатии на что-то еще внутри div.

1. Спасибо, но я ищу чисто JS-решение, поскольку свойство css resize не поддерживается в IE11.

2. На самом деле, я понял это. Вместо того, чтобы каждый раз увеличивать высоту на height = height 10, я изменил логику, чтобы увеличивать только тогда, когда height == 0