vue实现鼠标按下选中多个元素，然后鼠标松开，检测选中元素

关于js中鼠标按下进行元素选择，鼠标松开的时候检测选了多少个元素的实现。
写代码的时候需要实现这个功能，理了一下其中的逻辑，感觉还有点复杂，现在做一个记录。
**说明：**首先要用到鼠标事件，onmousedown、onmouseup（此处不用onmousemove）
获取坐标事件：event.pageX，event.pageY，获取相对于页面的坐标。
getBoundingClient()函数，获取元素距离页面的距离
用法：

rectObject = object.getBoundingClientRect();
	rectObject.top：元素上边到视窗上边的距离;
	rectObject.right：元素右边到视窗左边的距离;
	rectObject.bottom：元素下边到视窗上边的距离;
	rectObject.left：元素左边到视窗左边的距离;
	rectObject.width：是元素自身的宽
	rectObject.height是元素自身的高
	在ie7及ie7以下的html元素坐标会从(2, 2)开始算起，在ie8已经修复了这个bug。//document.documentElement.clientTop返回2
    兼容 var top = rectObject.top-document.documentElement.clientTop;//left bottom right同理

页面代码：

<div
                        @mousedown="getMousedowncoor"
                        @mouseup="getMouseupcoor"
                        ref="selectNodeExeCLC"
                        class="selectNodeExeCLC">
                        <div class="selectNodeExeCLCD" v-for="(item,index) in alternative" 
                        :key="index"
                        :class="item.checked?'selectColor':''"
                        @click="changeColor(item)"
                        @dblclick="selectNodeEPeo(item)"
                        >
                            {{item.name}}</div>
                    </div>

鼠标事件绑定给父元素

getMousedowncoor(event){//获取开始坐标
        this.isMultiSelValue = [];
        // this.isMousedown = true;
        event = event || window.event;
        console.log(event.pageY);
        // this.startPoint.x = event.clientX;
        this.startPoint.y = event.pageY;
        console.log(this.$refs.selectNodeExeCLC.getBoundingClientRect());
        this.rectPosition = this.$refs.selectNodeExeCLC.getBoundingClientRect().top;//获取父元素离当前窗口的距离
        console.log(this.rectPosition);
    },

getMouseupcoor(event){//获取结束坐标
        var startNumber;
        // this.isMousedown = false;
        event = event || window.event;

        this.endPoint.y = event.pageY;
        if(this.endPoint.y<this.startPoint.y){//判断是从后往前选还是从前往后选，如果是从后往前，则交换两个坐标位置
            var temp;
            temp = this.startPoint.y;
            this.startPoint.y = this.endPoint.y;
            this.endPoint.y = temp;
        }
        var absoluteP = this.startPoint.y-3- this.rectPosition; //记录点击位置距离父元素的距离，3是子元素离父元素有3px的距离
        console.log(absoluteP);
        startNumber = Math.floor(absoluteP/15.5);//从第几个div开始选择的,从0开始记，子元素高15.5px
        if(absoluteP%15.5 == 0){//检测鼠标按下的临界值
            startNumber--;
        }
        
        var endNumber = Math.ceil((this.endPoint.y-3-this.rectPosition)/15.5);//记录选到第几个div结束

        console.log("start"+startNumber);
        console.log("end"+endNumber);
        console.log(event.pageY);

        this.alternative.map((item,index)=>{//将选中的项存到新数组里面
            // console.log(index);
            if(index==startNumber){
                this.flag = true;
                if(startNumber<endNumber){
                    startNumber++;
                    this.isMultiSelValue.push(item);
                }
            }
        });

        console.log(this.isMultiSelValue);
    },