[Bookmarklet] ■

javascript: void((() => {
    const RECT_COLOR = 'black';
    const RECT_WIDTH = 200;
    const RECT_HEHGHT = 200;
    const RECT_MIN_SIZE = 24;
    const BORDER_COLOR = 'red';
    const BORDER_WIDTH = 8;

    let newRect = document.createElement('div');
    newRect.classList.add('draggable-rect');
    newRect.setAttribute('active', 'true');
    newRect.style.width = `${RECT_WIDTH}px`;
    newRect.style.height = `${RECT_HEHGHT}px`;
    let activeRect = document.querySelector('.draggable-rect[active]');
    if(activeRect) {
        activeRect.removeAttribute('active');
        newRect.style.left = `${(document.documentElement.clientWidth - RECT_WIDTH) * Math.random() + document.documentElement.scrollLeft}px`;
        newRect.style.top = `${(document.documentElement.clientHeight - RECT_HEHGHT) * Math.random() + document.documentElement.scrollTop}px`;
    }else {
        newRect.style.left = `${(document.documentElement.clientWidth - RECT_WIDTH) / 2 + document.documentElement.scrollLeft}px`;
        newRect.style.top = `${(document.documentElement.clientHeight - RECT_HEHGHT) / 2 + document.documentElement.scrollTop}px`;
    }
    newRect.innerHTML = `
<div class="draggable-rect-item resize-top resize-left"></div>
<div class="draggable-rect-item resize-top"></div>
<div class="draggable-rect-item resize-top resize-right"></div>
<div class="draggable-rect-item resize-left"></div>
<div class="draggable-rect-item move"></div>
<div class="draggable-rect-item resize-right"></div>
<div class="draggable-rect-item resize-bottom resize-left"></div>
<div class="draggable-rect-item resize-bottom"></div>
<div class="draggable-rect-item resize-bottom resize-right"></div>
`;
    document.body.appendChild(newRect);

    let style = document.getElementById('bml-draggable-rect-style');
    if(!style) {
        style = document.createElement('style');
        style.id = 'bml-draggable-rect-style';
        style.type = 'text/css';
        style.innerHTML = `
.draggable-rect {
box-sizing: border-box;
position: absolute;
z-index: 2147483646;
display: grid;
grid-template-rows: ${BORDER_WIDTH}px auto ${BORDER_WIDTH}px;
grid-template-columns: ${BORDER_WIDTH}px auto ${BORDER_WIDTH}px;
grid-template-areas: "resize-tl resize-t resize-tr" "resize-l move resize-r" "resize-bl resize-b resize-br";
background-color: ${RECT_COLOR};
}
.draggable-rect:hover,
.draggable-rect:active {
border: 1px solid ${BORDER_COLOR};
}
.draggable-rect[active] {
z-index: 2147483647;
}

.draggable-rect-item:hover,
.draggable-rect-item:active {
background-color: rgba(128, 128, 128, .2);
}
.draggable-rect-item.resize-top.resize-left {
grid-area: resize-tl;
cursor: nwse-resize;
}
.draggable-rect-item.resize-top {
grid-area: resize-t;
cursor: ns-resize;
}
.draggable-rect-item.resize-top.resize-right {
grid-area: resize-tr;
cursor: nesw-resize;
}
.draggable-rect-item.resize-left {
grid-area: resize-l;
cursor: ew-resize;
}
.draggable-rect-item.move {
grid-area: move;
cursor: move;
}
.draggable-rect-item.resize-right {
grid-area: resize-r;
cursor: ew-resize;
}
.draggable-rect-item.resize-bottom.resize-left {
grid-area: resize-bl;
cursor: nesw-resize;
}
.draggable-rect-item.resize-bottom {
grid-area: resize-b;
cursor: ns-resize;
}
.draggable-rect-item.resize-bottom.resize-right {
grid-area: resize-br;
cursor: nwse-resize;
}
`;
        document.head.appendChild(style);

        let draggedElement;
        let startX, startY, rectLeft, rectTop, rectWidth, rectHeight;
        document.addEventListener('mousedown', mousedown, true);
        document.addEventListener('mouseup', mouseup, true);
        document.addEventListener('mousemove', mousemove, true);
        function mousedown(e) {
            switch(e.button) {
                case 0: {
                    if(e.target.classList.contains('draggable-rect-item')) {
                        draggedElement = e.target;
                        activeRect = document.querySelector('.draggable-rect[active]');
                        if(activeRect) {
                            activeRect.removeAttribute('active');
                        }
                        activeRect = e.target.parentNode;
                        activeRect.setAttribute('active', 'true');
                        startX = e.clientX;
                        startY = e.clientY;
                        rectLeft = parseInt(activeRect.style.left);
                        rectTop = parseInt(activeRect.style.top);
                        rectWidth = activeRect.offsetWidth;
                        rectHeight = activeRect.offsetHeight;
                    };
                    break;
                }
                case 1: {
                    if(e.target.classList.contains('draggable-rect-item')) {
                        e.preventDefault();
                        activeRect = e.target.parentNode;
                        activeRect.remove();
                    };
                    break;
                }
            }
        }
        function mouseup(e) {
            draggedElement = null;
        }
        function mousemove(e) {
            if(draggedElement) {
                e.preventDefault();
                let deltaX = e.clientX - startX;
                let deltaY = e.clientY - startY;
                if(draggedElement.classList.contains('move')) {
                    activeRect.style.left = Math.min(document.documentElement.scrollWidth - rectWidth, Math.max(0, rectLeft + deltaX)) + 'px';
                    activeRect.style.top = Math.min(document.documentElement.scrollHeight - rectHeight, Math.max(0, rectTop + deltaY)) + 'px';
                }
                if(draggedElement.classList.contains('resize-left')) {
                    activeRect.style.left = Math.min(rectLeft + rectWidth - RECT_MIN_SIZE, Math.max(0, rectLeft + deltaX)) + 'px';
                    activeRect.style.width = Math.min(rectLeft + rectWidth, Math.max(RECT_MIN_SIZE, rectWidth - deltaX)) + 'px';
                }
                if(draggedElement.classList.contains('resize-top')) {
                    activeRect.style.top = Math.min(rectTop + rectHeight - RECT_MIN_SIZE, Math.max(0, rectTop + deltaY)) + 'px';
                    activeRect.style.height = Math.min(rectTop + rectHeight, Math.max(RECT_MIN_SIZE, rectHeight - deltaY)) + 'px';
                }
                if(draggedElement.classList.contains('resize-right')) {
                    activeRect.style.width = Math.min(document.documentElement.scrollWidth - rectLeft, Math.max(RECT_MIN_SIZE, rectWidth + deltaX)) + 'px';
                }
                if(draggedElement.classList.contains('resize-bottom')) {
                    activeRect.style.height = Math.min(document.documentElement.scrollHeight - rectTop, Math.max(RECT_MIN_SIZE, rectHeight + deltaY)) + 'px';
                }
            }
        }
    }
})());