JS调整html元素大小

最新推荐文章于 2024-08-06 22:50:57 发布

木马啊

最新推荐文章于 2024-08-06 22:50:57 发布

阅读量3.2k

点赞数 1

分类专栏： vue.js 文章标签： JS 改变元素大小

本文链接：https://blog.csdn.net/u010419337/article/details/79811295

版权

本文介绍了如何使用JavaScript和Vue.js实现HTML元素的拖动调整大小功能。通过在元素间添加分界元素，监听mousedown、mousemove和mouseup事件，动态计算鼠标移动距离并相应调整元素尺寸。项目以Vue组件形式展示实现效果。

摘要由CSDN通过智能技术生成

想在页面上实现拖动两个元素分界位置可以改变元素的大小，基本思路是：在两个元素之间增加一个分界元素，监听该元素的mousedown事件，事件触发时立刻设置监听页面mousemove事件以及mouseup事件，mousemove事件处理元素大小修改，mouseup事件触发时应该移除页面mousemove事件。其中主要是mousemove事件，其实就是计算鼠标在拖动过程中，鼠标相对屏幕的垂直距离（或者水平距离）的变化量，然后分界元素上下（或左右）的两个元素的高度（或宽度）跟随此变化量变化即可。

项目使用Vue.js开发，所以这里写成一个单页面组件的形式。

实现效果：

代码：

<template>
    <div id="board">
        <div class="card" id="node1">
            区域1
        </div>
        <div id="dividing-line1"></div>
        <div class="card" id="node2">
            区域2
        </div>
        <div id="dividing-line2"></div>