js框选功能（vue）

实现效果

实现逻辑

• 绘制区域
• 判断有多少控件在此区域，进行拖拽操作

布局

父容器page-design 设置position：relative，id为rectangular的框选盒子设置 position:absolute; display:none。

js实现框选效果

• 给父容器page-design绑定mousedown事件
• 在鼠标按下事件mousedown 记录起始坐标，及起始上边距与下边距，并监听鼠标移动的事件及松开的事件。
• 在鼠标移动mousemove事件中记录当前位置的坐标及相对父容器的上边距与左边距 绘制框选区域。
• 在鼠标松开事件mouseup事件中，禁用鼠标移动事件，框选样式清空

1.鼠标按下事件完整代码

 //鼠标左键按下方法
    onmousedownClick(event) {
      let that = this;
      that.start_x = event.clientX;//距离当前body可视区域的起始y坐标
      that.start_y = event.clientY;//距离当前body可视区域的起始y坐标
      that.start_offsetY=event.target.offsetTop+event.offsetY //距离父盒子的起点上边距
      that.start_offsetX=event.target.offsetLeft+event.offsetX//距离父盒子的起点左边距
      document.body.onmousemove = function (e) {       
        let move_x = e.clientX;//距离当前body可视区域的终点x坐标
        let move_y = e.clientY;//距离当前body可视区域的终点y坐标
        let move_offsetY=e.target.offsetTop+e.offsetY//距离父盒子的当前移动位置上边距
        let move_offsetX=e.target.offsetLeft+e.offsetX//距离父盒子的当前移动位置左边距
        let divElement = document.getElementById("rectangular");
        divElement.style.display = "block";
        divElement.className = "rectangular";
        //从左往右
        // 画矩形
        divElement.style.top =Math.min(that.start_offsetY,move_offsetY) + "px";
        divElement.style.height =Math.abs(that.start_y-move_y) + "px";
        divElement.style.width = Math.abs(that.start_x-move_x) + "px"; 
        divElement.style.left = Math.min(that.start_offsetX,move_offsetX)+ "px";
      };
      document.body.onmouseup = function () {
        //禁用鼠标移动时间
        document.body.onmousemove = function () {
          return false;
        };
        // 移动样式清空
        let divElement = document.getElementById("rectangular");
        divElement.style.display = "none";
      };
    },

2.鼠标松开完整代码
判断控件与框选区域相交的条件

• 控件横向坐标的最大值大于框选区域的左边距
• 控件的左边距小于框选区域横向坐标的最大值
• 控件的上边距小于框选区域纵向坐标的最大值
• 控件纵向坐标的最大值大于框选区域的上边距
  -

 //鼠标左键抬起方法
    handMouseUp: function (event) {     
      let divElement = document.getElementById("rectangular");
      this.end_x = event.clientX;
      this.end_y = event.clientY;
      let end_offsetY=event.target.offsetTop+event.offsetY//距离父盒子的终点上边距
      let end_offsetX=event.target.offsetLeft+event.offsetX//距离父盒子的终点左边距      
      divElement.style.left = Math.min(this.start_offsetX, end_offsetX);
      divElement.style.top = Math.min(this.start_offsetY, end_offsetY);
      divElement.style.width = Math.abs(this.end_x - this.start_x);
      divElement.style.height = Math.abs(this.end_y - this.start_y);
      var _l = parseInt(divElement.style.left),//框选区域的左边距值
        _t = parseInt(divElement.style.top);//框选区域的上边距值
      var _w = parseInt(divElement.style.width),//框选区域的宽度
        _h = parseInt(divElement.style.height);//框选区域的高度
      //核心内容，根据你的鼠标移动矩形区域来判断div是否在里面
      let widgets = this.dWidgets;
      let a = 0;
      for (let i = 0; i < widgets.length; i++) {
        let widget = widgets[i];
        var sl = widget.width + widget.left;//控件横向坐标最大值
        var st = widget.height + widget.top;//控件纵向坐标最大值

        if (
          sl > _l &&
          st > _t &&
          widget.left < _l + _w &&
          widget.top < _t + _h
        ) {
          let uuid = widget.uuid;
          this.dSelectWidgets.push(widget);
          // 设置选中元素
          this.selectWidget({
            uuid: uuid,
          });
        } else {
          this.dSelectWidgets = [];
        }
      }
    },