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

上下两个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日