首页 > 其他分享 >拖拽改变div大小方法

拖拽改变div大小方法

时间:2024-12-24 13:41:36浏览次数:7  
标签:style target cursor let 大小 div document 拖拽 resize

const updateWidth = () => {
      let resize = document.getElementById("datatree");
      let mainForm = document.getElementsByClassName("mainForm");
      resize.onmousedown = function (e) {       
        let startX = e.clientX;
        if(e.target.style.cursor == "e-resize")
      {
       document.onmousemove = function (e) {
        
          let endX = e.clientX;
          let moveLen = endX - startX;
          startX = endX;
          widthData.with += moveLen;
          data.widthTree = widthData.with - 25;
          //e.target.style.cursor = "e-resize"
        };

        document.onmouseup = function (e) {
          // 颜色恢复
          e.target.style.cursor = "auto";
          e.target.style.background = "";
          resize.style.cursor = "auto";
          resize.style.background = "";
          document.getElementById("asideId").style.cursor = "auto";
          document.getElementById("asideId").style.background = "";
          
          for (let index = 0; index < mainForm.length; index++) {
            mainForm[index].style.cursor = "auto";
          mainForm[index].style.background = "";
          }
          
          
          document.onmousemove = null;
          document.onmouseup = null;
           
        };
       
        return false;
      }
        
      };
    };
//在onMounted中实现方法
updateWidth();
      let resize = document.getElementById("asideId");
      let tree = document.getElementById("datatree");
      tree.onmousemove = function (e) {
        var divRect = e.target.getBoundingClientRect();
        var x = e.clientX - divRect.left-20;
        var y = e.clientY - divRect.top;        
        if (e.target.offsetWidth-1<=x||
        e.target.offsetWidth-2<=x||
        e.target.offsetWidth-3<=x||
        e.target.offsetWidth-4<=x||
         e.target.offsetWidth-23<=x||
          e.target.offsetWidth-24<=x||
           e.target.offsetWidth-25<=x
        ) {
    e.target.style.cursor = "e-resize";
  }
        else {
          e.target.style.cursor = "";
        }
      };

 

标签:style,target,cursor,let,大小,div,document,拖拽,resize
From: https://www.cnblogs.com/liao-long/p/18627230

相关文章

  • 如何修改textarea内容的字体大小及字体颜色?
    在前端开发中,修改textarea内容的字体大小和字体颜色通常通过CSS来实现。以下是一个简单的示例,说明如何为textarea设置字体大小和颜色:HTML:首先,在HTML中定义一个textarea元素,并为其添加一个类名(例如,my-textarea),以便在CSS中引用。<textareaclass="my-textarea"rows="4"......
  • DevExpress WPF中文教程:Grid - 如何移动和调整列大小?(二)
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品,还是以数据为中心......
  • Linux中设置终端窗口大小
    本章目录本次示例以Ubuntu为例:Ctrl+Alt+T先打开一个终端设置行列大小,重启终端生效:同理,此处也可设置字体、颜色等其它属性,可自由选择,希望对你有帮助;本次示例以Ubuntu为例:Ctrl+Alt+T先打开一个终端设置行列大小,重启终端生效:同理,此处也可设置字体、颜色......
  • Codeforces Round 995 (Div. 3)(补题)
    CodeforcesRound995(Div.3)D.CountingPairs(离散化+二分)题目描述给你一个由\(n\)个整数组成的序列\(a\),其中序列的\(i\)-th元素等于\(a_i\)。同时还给出两个整数\(x\)和\(y\)(\(x\ley\))。如果满足以下条件,一对整数\((i,j)\)就会被认为是有趣的:\(1......
  • 大小球准确判断方法:AI人工智能大数据预测
    一、引言在体育竞技领域,预测比赛结果一直是众多球迷和专业人士关注的焦点。本文旨在探讨如何运用AI人工智能和大数据技术,对比赛中的大小球结果进行准确判断。我们将详细介绍相关算法和算式,以及如何在实际操作中提高预测的准确性。二、数据预处理在进行AI预测之前,首先要对数......
  • Codeforces Round 993 (Div. 4)(补题)
    CodeforcesRound993(Div.4)只选择对我有价值的题目记录E.InsaneProblem题目描述给定五个整数\(k\),\(l_1\),\(r_1\),\(l_2\)和\(r_2\),Wave希望你帮助她计算满足以下所有条件的有序对\((x,y)\)的数量:\(l_1\leqx\leqr_1\)。\(l_2\leqy\leqr_2\)。存在一......
  • C# winform自定义图片空间 缩放、拖拽、绘画
    首先简单介绍一下图片自定义的功能1、滑动鼠标滚轮缩放图片;2、按住鼠标左键拖拽图片;3、可选绘画矩形、圆、直线、画笔;4、可选连续绘画、单次绘画;5、每次绘画通过事件返回起点坐标、终点坐标;6、右击可重置图片大小(适应窗口)、原始尺寸(100%)、另存当前图片、清除绘画;7、For......
  • CF补题 993-Div.4
    CF补题993-Div.4-20241221Dashboard-CodeforcesRound993(Div.4)-CodeforcesA:题目大意:给出一个\(n\),求有多少有序正整数数对\((a,b)\),使得\(a=n-b\)#include<iostream>#definestreampreset()ios::sync_with_stdio(false),cin.tie(0),cout.tie(0);usingnames......
  • 如何在PbootCMS中处理不同Web服务器的文件上传大小限制?
    在PbootCMS中,不同的Web服务器(如Apache、Nginx、IIS)对文件上传大小有不同的限制。为了确保在不同Web服务器上都能正确处理文件上传,需要对相应的配置文件进行调整。以下是针对不同Web服务器的详细步骤:Apache:Apache的文件上传大小限制主要由php.ini文件中的参数控制,如upload_max......
  • 3. 八种基本数据类型大小及封装类
    基本类型大小(字节)默认值封装类byte1(byte)0Byteshort2(short)0Shortint40Integerlong80LLongfloat40.0fFloatdouble80.0dDoubleboolean-falseBooleanchar2\u0000(null)Character注:1.int是基本数据类型,Integer是in......