鼠标拖拽调整div大小

最新推荐文章于 2024-04-19 15:39:51 发布
最新推荐文章于 2024-04-19 15:39:51 发布
阅读量7.1k 收藏 29
点赞数 13
分类专栏： html js 文章标签： 拖动 鼠标 尺寸 html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BDawn/article/details/114374460
版权
js 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏

鼠标拖拽调整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
        }
    }

    // 鼠标移动事件
    function move(e) {
        let d = getDirection(e)
        let cursor
        if (d === '') cursor = 'default';
        else cursor = d + '-resize';
        // 修改鼠标显示效果
        c.style.cursor = cursor;
        // 当开启尺寸修改时，鼠标移动会修改div尺寸
        if (resizeable) {
            // 鼠标按下的位置在右边，修改宽度
            if (direc.indexOf('e') !== -1) {
                c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
                clientX = e.clientX
            }

            // 鼠标按下的位置在上部，修改高度
            if (direc.indexOf('n') !== -1) {
                c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
                clientY = e.clientY
            }
            // 鼠标按下的位置在底部，修改高度
            if (direc.indexOf('s') !== -1) {
                c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
                clientY = e.clientY
            }

            // 鼠标按下的位置在左边，修改宽度
            if (direc.indexOf('w') !== -1) {
                c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
                clientX = e.clientX
            }

        }
    }

    // 获取鼠标所在div的位置
    function getDirection(ev) {
        let xP, yP, offset, dir;
        dir = '';

        xP = ev.offsetX;
        yP = ev.offsetY;
        offset = 10;

        if (yP < offset) dir += 'n';
        else if (yP > c.offsetHeight - offset) dir += 's';
        if (xP < offset) dir += 'w';
        else if (xP > c.offsetWidth - offset) dir += 'e';

        return dir;
    }
</script>
</body>
</html>

功能增强，通过八个点拖动元素尺寸

在这里插入图片描述

<!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;
            position: relative;
            margin: 40px;
        }

        .point{
            display: none;
        }

        #container:hover .point{
            display: block;
            width: 4px;
            height: 4px;
            border-radius: 2px;
            border: #08253b 1px solid;
            position: absolute;
        }

        .top{
            top: -2px;
            left: 50%;
        }
        .bottom{
            bottom: -2px;
            left: 50%;
        }
        .left{
            left: -2px;
            top: 50%;
        }
        .right{
            right: -2px;
            top: 50%;
        }

        .top-left{
            top: -2px;
            left: -2px;
        }

        .bottom-left{
            bottom: -2px;
            left: -2px;
        }

        .top-right{
            top: -2px;
            right: -2px;
        }

        .bottom-right{
            bottom: -2px;
            right: -2px;
        }

        .item {
            cursor: default;
            width: 100%;
            height: 100%;
            background: #757575;
        }
    </style>
</head>
<body id="body">
<div id="container">
    <div class="item"></div>
    <div class="point top"></div>
    <div class="point left"></div>
    <div class="point right"></div>
    <div class="point bottom"></div>
    <div class="point top-left"></div>
    <div class="point top-right"></div>
    <div class="point bottom-left"></div>
    <div class="point bottom-right"></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
    }
  }

  // 鼠标移动事件
  function move(e) {
    console.log(e);
    let d = getDirection(e)
    let cursor
    if (d === '') cursor = 'default';
    else cursor = d + '-resize';
    // 修改鼠标显示效果
    c.style.cursor = cursor;
    // 当开启尺寸修改时，鼠标移动会修改div尺寸
    if (resizeable) {
      // 鼠标按下的位置在右边，修改宽度
      if (direc.indexOf('e') !== -1) {
        c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
        clientX = e.clientX
      }

      // 鼠标按下的位置在上部，修改高度
      if (direc.indexOf('n') !== -1) {
        c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
        clientY = e.clientY
      }
      // 鼠标按下的位置在底部，修改高度
      if (direc.indexOf('s') !== -1) {
        c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
        clientY = e.clientY
      }

      // 鼠标按下的位置在左边，修改宽度
      if (direc.indexOf('w') !== -1) {
        c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
        clientX = e.clientX
      }

    }
  }

  // 获取鼠标所在div的位置
  function getDirection(ev) {
    let dir = '';
    if (ev.target.className.indexOf('top') >= 0) dir += 'n';
    else if (ev.target.className.indexOf('bottom') >= 0) dir += 's';
    if (ev.target.className.indexOf('left') >= 0) dir += 'w';
    else if (ev.target.className.indexOf('right') >= 0) dir += 'e';
    return dir;
  }
</script>
</body>
</html>
bdawn
关注
  • 13
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
拖拽+拖拽改变div大小
06-19
拖拽并同时拖拽改变div大小暂无兼容性问题
Div拖动/调整大小实例
12-28
Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置 Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置
记一次在VUE项目中通过托拽div边框实现改变div大小
weixin_45337695的博客
01-28 4247
主要实现的功能如图 实现方式
通过拖拽动态调整div的大小
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-19 1152
主要介绍通过手动拖拽，实现动态改变div的宽高。
vue实现鼠标选中div拖拽缩放功能
花落微凉梦清幽的博客
09-05 946
鼠标选中一个div，并且有选中样式，点击八个角实现鼠标拖拽div进行缩放。
vue中实现拖动调整左右两侧div的宽度
热门推荐
weixin_48398799的博客
05-08 1万+
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 一、HTML代码 <templete> <div class="box" ref="box"> <div class="left"> <!--左侧div内容--> </div> <div class="resize" title="收缩侧边栏"> ⋮ </div> <div class="m.
(JS\VUE\REACT) div拖拽移动+控制大小（高度、宽度） 及 单独只控制div的宽度
weixin_56383764的博客
01-12 1641
JS div拖拽移动+控制大小（高度、宽度） 及 单独只控制div的宽度。适用与原生JS、vue、react等多种形式
js实现鼠标拖拽改变div大小的同时另一个div宽度也变化
Mr_yangx的博客
02-22 1042
【代码】js实现鼠标拖拽改变div大小的同时另一个div宽度也变化。
鼠标拖动改变div 宽度
责任与担当
02-12 1717
鼠标移动改变div 大小/宽度 如图 在这里插入图片描述 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
鼠标拖动改变DIV等网页元素的大小的实现方法
08-30
鼠标拖动改变DIV等网页元素的大小的实现方法 在 Web 开发中，实现鼠标拖动改变 DIV 等网页元素的大小是非常常见的需求。下面，我们将详细介绍如何实现鼠标拖动改变 DIV 等网页元素的大小。 首先，我们需要了解 ...
html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现
02-25
html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现 代码简洁、易懂、易改造
可拖动div边框改变大小的方法
11-21
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
js拖动、拖拽div大小,完美实现版
12-16
js拖动 拖拽div大小，内部随意文件操作。完美实现版
DIV层拖动的实现，可改变大小.
07-03
DIV层拖动的实现，可改变大小.DIV层拖动的实现，可改变大小.
vue中解决拖拽改变存在iframe的div大小时卡顿问题
10-15
在Vue开发过程中，拖拽操作是一项常见的交互设计，特别是在构建可自定义布局的应用时。然而，当涉及到在拖拽过程中改变...通过这样的优化，可以显著提高用户在拖拽调整iframe div大小时的体验，使得操作流畅无卡顿。
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
js实现鼠标拖拽多选功能示例
10-19
在JavaScript中实现鼠标拖拽多选功能是一种常见的交互设计，特别是在网页中处理列表或网格数据时。本示例介绍了一种方法，通过结合jQuery库来完成这个任务。下面我们将详细探讨实现这一功能的关键步骤和涉及的技术点...
Vue3实现div拖拽改变宽高
倚栏听风
10-08 1437
拖拽改变div宽高
vue拖拽div边框调整大小卡顿如何解决
05-26
Vue拖拽div边框调整大小卡顿可能是由于频繁地重新渲染元素造成的。为了解决这个问题，可以考虑使用Vue的指令来实现拖拽调整大小的功能，而不是在模板中直接绑定事件。另外，可以通过debounce或throttle函数来限制触发频率，减少重复渲染的次数，从而提高性能。 以下是一个简单的示例代码： ```html <div v-dragresize="{handler: onResize}"> <!-- content --> </div> ``` ```javascript Vue.directive('dragresize', { bind: function (el, binding, vnode) { let handler = binding.value.handler; let debounce = binding.value.debounce || 100; let throttle = binding.value.throttle || 0; let startX = 0; let startY = 0; let startW = 0; let startH = 0; let resizeHandler = function (e) { let dx = e.clientX - startX; let dy = e.clientY - startY; let newW = startW + dx; let newH = startH + dy; if (newW < 0) newW = 0; if (newH < 0) newH = 0; handler({width: newW, height: newH}); }; let mouseDownHandler = function (e) { startX = e.clientX; startY = e.clientY; startW = el.clientWidth; startH = el.clientHeight; document.addEventListener('mousemove', resizeHandler); document.addEventListener('mouseup', mouseUpHandler); }; let mouseUpHandler = function (e) { document.removeEventListener('mousemove', resizeHandler); document.removeEventListener('mouseup', mouseUpHandler); }; el.addEventListener('mousedown', debounce ? _.debounce(mouseDownHandler, debounce) : mouseDownHandler, throttle); } }); new Vue({ el: '#app', data: { width: 200, height: 200 }, methods: { onResize: function ({width, height}) { this.width = width; this.height = height; } } }); ``` 在这个示例中，我们定义了一个名为`v-dragresize`的指令，并将一个名为`onResize`的方法作为参数传递给它。当用户在元素上按下鼠标时，我们记录下当前的鼠标位置和元素的宽高，并将一个`mousemove`事件绑定到`document`上。在`mousemove`事件处理程序中，我们计算出当前鼠标位置与起始位置之间的差值，并根据差值调整元素的宽高。最后，我们将新的宽高值作为参数传递给`onResize`方法。 注意，我们使用了`_.debounce`函数来限制`mousedown`事件的触发频率。这样可以防止用户快速点击元素时频繁地触发重复渲染。你需要在使用这个指令时将`lodash`库引入你的项目中，或者使用自己的`debounce`函数来代替。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bdawn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值