鼠标拖拽调整div大小

最新推荐文章于 2024-06-11 14:45:32 发布

原创

最新推荐文章于 2024-06-11 14:45:32 发布 · 8k 阅读

标签

#拖动 #鼠标 #尺寸 #html #js

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅

鼠标拖拽调整div大小

实现思路

根据鼠标位置改变鼠标样式
当鼠标在div的边缘和四个角时显示不同的样式，通过cursor修改
当鼠标在div的边缘和四个角按下时记录具体坐标点位置，并开始根据鼠标的移动修改div的尺寸
鼠标松开时结束尺寸修改

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, html {
    
    
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #container {
    
    
            width: 200px;
            height: 200px;
            padding: 15px;
            border: #00cdcd 2px solid;
            box-sizing: border-box;
        }

        .item {
    
    
            cursor: default;
            width: 100%;
            height: 100%;
            background: #757575;
        }
    </style>
</head>
<body id="body">
<div id="container">
    <div class="item"></div>
</div>
<script>
    //需要调整尺寸的div
    let c = document.getElementById('container')
    // body监听移动事件
    document.getElementById('body').addEventListener('mousemove', move)
    // 鼠标按下事件
    c.addEventListener('mousedown', down)
    // 鼠标松开事件
    document.getElementById('body').addEventListener('mouseup', up)

    // 是否开启尺寸修改
    let resizeable = false
    // 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
    let clientX, clientY
    // div可修改的最小宽高
    let minW = 8, minH = 8
    // 鼠标按下时的位置，使用n、s、w、e表示
    let direc = ''

    // 鼠标松开时结束尺寸修改
    function up() {
    
    
        resizeable = false
    }

    // 鼠标按下时开启尺寸修改
    function down(e) {
    
    
        let d = getDirection(e)
        // 当位置为四个边和四个角时才开启尺寸修改
        if (d !== '') {
    
    
            resizeable = true
            direc = d
            clientX = e.clientX
            clientY = e.clientY
        }
    }

    // 鼠标移动事件