Управление HTML DOM с ванильным JavaScript

Авторизоваться

Предположим, что мы хотим превратить следующий элемент в изменяемы элемент:

<div id="resizeMe" class="resizable">Resize me</div>

Во-первых, нам нужно подготовить некоторые элементы, которые указывают, что размер элемента можно изменить. Они размещены абсолютно по четырем сторонам оригинального элемента. Чтобы сделать демо просто, я готовлю только два из них, которые расположены справа и снизу:

<div id="resizeMe" class="resizable">
    Resize me
    <div class="resizer resizer-r"></div>
    <div class="resizer resizer-b"></div>
</div>

Вот основные стили для макета:

.resizable {
    position: relative;
}
.resizer {
    /* All resizers are positioned absolutely inside the element */
    position: absolute;
}

/* Placed at the right side */
.resizer-r {
    cursor: col-resize;
    height: 100%;
    right: 0;
    top: 0;
    width: 5px;
}

/* Placed at the bottom side */
.resizer-b {
    bottom: 0;
    cursor: row-resize;
    height: 5px;
    left: 0;
    width: 100%;
}

Чтобы сделать элемент изменяемым, мы собираемся обработать три события:

mousedown на изменение размера: отслеживать текущее положение мыши и размер исходного элемента
mousemove у document: вычислить, насколько далеко была перемещена мышь, и отрегулировать размер элемента
mouseup у document: Удалить обработчики событий document

// Query the element
const ele = document.getElementById('resizeMe');

// The current position of mouse
let x = 0;
let y = 0;

// The dimension of the element
let w = 0;
let h = 0;

// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function(e) {
    // Get the current mouse position
    x = e.clientX;
    y = e.clientY;

    // Calculate the dimension of element
    const styles = window.getComputedStyle(ele);
    w = parseInt(styles.width, 10);
    h = parseInt(styles.height, 10);

    // Attach the listeners to `document`
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function(e) {
    // How far the mouse has been moved
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    // Adjust the dimension of element
    ele.style.width = `${w + dx}px`;
    ele.style.height = `${h + dy}px`;
};

const mouseUpHandler = function() {
    // Remove the handlers of `mousemove` and `mouseup`
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
};

Все обработчики событий готовы. Наконец, мы прикрепляем обработчик событий mousedown ко всем изменяющим размеры элементам:

// Query all resizers
const resizers = ele.querySelectorAll('.resizer');

// Loop over them
[].forEach.call(resizers, function(resizer) {
    resizer.addEventListener('mousedown', mouseDownHandler);    
});

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?