jiojio冲冲冲 2022-01-29 10:14 采纳率: 0%
浏览 8
已结题

上下两个table 下table通过鼠标移动 高度动态变化

1.没移动前

img


2.移动深色线条后下table 高度没更新

img

3.代码

 handelmousedown() {
      var tableDiv = this.$refs.Table.$el;
      var dtable = this.$refs.dragTable.$el;
      var oDiv = this.$refs.lineDiv;
      var theight = parseInt(tableDiv.offsetHeight); //parseInt为了不指向对象
      var dheight = parseInt(dtable.offsetHeight);
      oDiv.style.cursor = "s-resize";
      var ev = ev || event;
      //鼠标按下坐标
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // IE8 取消默认行为-设置全局捕获
      if (oDiv.setCapture) {
        oDiv.setCapture();
      }
      var that = this;
      document.onmousemove = function (ev) {
        var ev = ev || event;

        // 鼠标移动时的鼠标位置

        var mouseMoveX = ev.clientX;

        var mouseMoveY = ev.clientY;

        tableDiv.style.height = theight + (mouseMoveY - mouseDownY) + "px";

        dtable.style.height = dheight + (mouseDownY - mouseMoveY) + "px";
        window.onresize = function () {
          this.dragTableHeight = dheight + (mouseDownY - mouseMoveY) + "px";
        };

        console.log(this.dragTableHeight);//这边高度计算的没问题 就是没更新上
      };
      document.onmouseup = function () {
        document.onmousemove = null;

        // 释放全局捕获

        if (oDiv.releaseCapture) {
          oDiv.releaseCapture();
        }
      };

      return false;
    },

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 2月6日
    • 创建了问题 1月29日

    悬赏问题

    • ¥15 onlyoffice编辑完后立即下载,下载的不是最新编辑的文档
    • ¥15 求caverdock使用教程
    • ¥15 Coze智能助手搭建过程中的问题请教
    • ¥15 12864只亮屏 不显示汉字
    • ¥20 三极管1000倍放大电路
    • ¥15 vscode报错如何解决
    • ¥15 前端vue CryptoJS Aes CBC加密后端java解密
    • ¥15 python随机森林对两个excel表格读取,shap报错
    • ¥15 基于STM32心率血氧监测(OLED显示)相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么
    • ¥100 X轴为分离变量(因子变量),如何控制X轴每个分类变量的长度。