如何用纯javascript让一个可拖拽的div在4个角上都可以调整大小？

要实现让一个可拖拽的div在4个角上都可以调整大小，可以通过纯JavaScript来实现。下面是一个实现的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
    .draggable {
        width: 200px;
        height: 200px;
        background-color: #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: move;
    }

    .resizable {
        width: 10px;
        height: 10px;
        background-color: #000;
        position: absolute;
        cursor: nwse-resize;
    }

    .resizable-top-left {
        top: -5px;
        left: -5px;
    }

    .resizable-top-right {
        top: -5px;
        right: -5px;
    }

    .resizable-bottom-left {
        bottom: -5px;
        left: -5px;
    }

    .resizable-bottom-right {
        bottom: -5px;
        right: -5px;
    }
</style>
</head>
<body>
    <div class="draggable">
        <div class="resizable resizable-top-left"></div>
        <div class="resizable resizable-top-right"></div>
        <div class="resizable resizable-bottom-left"></div>
        <div class="resizable resizable-bottom-right"></div>
    </div>

    <script>
        // 获取可拖拽的div元素
        var draggableElement = document.querySelector('.draggable');
        // 获取可调整大小的div元素
        var resizableElements = document.querySelectorAll('.resizable');

        var startX, startY, startWidth, startHeight;

        // 鼠标按下事件处理函数
        function mouseDown(event) {
            startX = event.clientX;
            startY = event.clientY;
            startWidth = parseInt(window.getComputedStyle(draggableElement).width);
            startHeight = parseInt(window.getComputedStyle(draggableElement).height);
            document.addEventListener('mousemove', mouseMove);
            document.addEventListener('mouseup', mouseUp);
        }

        // 鼠标移动事件处理函数
        function mouseMove(event) {
            var deltaX = event.clientX - startX;
            var deltaY = event.clientY - startY;

            // 调整大小
            if (event.target.classList.contains('resizable')) {
                var currentWidth = startWidth + deltaX;
                var currentHeight = startHeight + deltaY;

                draggableElement.style.width = currentWidth + 'px';
                draggableElement.style.height = currentHeight + 'px';
            }
            // 拖拽移动
            else {
                var newX = draggableElement.offsetLeft + deltaX;
                var newY = draggableElement.offsetTop + deltaY;

                draggableElement.style.left = newX + 'px';
                draggableElement.style.top = newY + 'px';
            }
        }

        // 鼠标松开事件处理函数
        function mouseUp() {
            document.removeEventListener('mousemove', mouseMove);
            document.removeEventListener('mouseup', mouseUp);
        }

        // 绑定鼠标按下事件
        resizableElements.forEach(function(element) {
            element.addEventListener('mousedown', mouseDown);
        });
    </script>
</body>
</html>

这段代码创建了一个可拖拽的div，同时在div的四个角上添加了可调整大小的小块。通过鼠标按下、移动和松开事件的处理函数，实现了拖拽和调整大小的功能。

这个功能可以应用于各种需要用户自定义大小和位置的场景，比如网页布局设计、图形编辑器等。

腾讯云相关产品和产品介绍链接地址：