用原生js实现矩形框选，同时加入vue中使用（修复bug）_-moz-user-select bug

本文链接：https://blog.csdn.net/2401_84412194/article/details/138421738

//当鼠标按下时，按钮事件

trainSelected.onmousedown

//当鼠标指针移出时，

trainSelected.onmousemove

//当松开鼠标按钮时，

trainSelected.onmouseup

附加信息：如何得到AID 和 BID 的具体信息：

第一步：通过@mousemove=“move()” 方法绑定id

第二步：通过：

//取出来：矩形里开始位置的Aid 和结束位置的Bid

move(data){

if (!this.pressed) return

// console.log(“data”,data);

this.pressData.push(data);

第三步：定义数组：this.pressData = []; //圈中的值，初始化

最后：

//当松开鼠标按钮时，

trainSelected.onmouseup = (event) =>{

console.log(“end”,this.pressData, this.pressData[0], this.pressData[this.pressData.length-1]);

AID= this.pressData, this.pressData[0],

BID = this.pressData[this.pressData.length-1];

}

由于我没放真实的数组id 在这里 @mousemove=“move()” move（数组id）

所以end 打印的都没有值：

具体代码如下：

<template>
    <div unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
        <div id = "bottom" ></div>
        <div id="trainSelected" @mousemove="move()">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            pressed: false, 
            pressData:null,
        }
    },
    methods:{
       //取出来：矩形里开始位置的Aid 和 结束位置的Bid
        move(data){
            if (!this.pressed) return
            // console.log("data",data);
            this.pressData.push(data);
        },
        boxSelection(){
            this.pressData = []; //圈中的值，初始化
            var stateBar = document.getElementById("bottom");
            var trainSelected = document.getElementById('trainSelected');
            //当鼠标按下时，按钮事件
            trainSelected.onmousedown = (e) =>{
                this.pressed = true;
                // console.log('开始',e , e.clientY, e.clientY)

            var posx = e.clientX;
            var posy = e.clientY;
            var div = document.createElement("div");
            div.className = "tempDiv";
            div.style.left = e.clientX+"px";
            div.style.top = e.clientY+"px";
            // document.body.appendChild(div);
            trainSelected.appendChild(div);
            //当鼠标指针移出时，
            trainSelected.onmousemove = (ev) =>{
                div.style.left = Math.min(ev.clientX, posx) + "px";
                div.style.top = Math.min(ev.clientY, posy) + "px";
                div.style.width = Math.abs(posx - ev.clientX)+"px";
                div.style.height = Math.abs(posy - ev.clientY)+"px";

                // aid的left=矩形的left; top=top+height
                // bid的left=矩形的left+width; top=top+height

                //Aid 的位置坐标
                // let AId_left = e.clientX;
                // let AId_hight = (e.clientY + Math.abs(posy - ev.clientY));

                //Bid 的位置坐标
                // let BId_left = e.clientX + Math.abs(posx - ev.clientX);
                // let BId_hight = (e.clientY + Math.abs(posy - ev.clientY));
                stateBar.innerHTML = "MouseX: " + ev.clientX + "<br/>MouseY: " + ev.clientY;
                //当松开鼠标按钮时，
                trainSelected.onmouseup = (event) =>{
                    console.log("end",this.pressData, this.pressData[0], this.pressData[this.pressData.length-1]);
                    this.pressed = false;
                    // console.log('结束', event.clientX, event.clientY)
                    div.parentNode.removeChild(div);
                    trainSelected.onmousemove = null;
                    trainSelected.onmouseup = null;
                    // this.show = true;
                }
            }
            }
        },
    },
    created(){

    },
    mounted(){
        this.boxSelection();
    }
}
</script>

<style>
*{
    padding:0;
    margin:0;
}
/* /鼠标移动时禁止选中文字/ */
div{
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
}
#bottom{
    position:absolute;
    bottom:0px;
    width:100%;
    height:40px;
    border:1px solid #000;
    background:#000;
    color:#fff;
}
.tempDiv{
    border:1px dashed blue;
    background:#5a72f8;
    position:absolute;
    width:0;
    height:0;
    filter:alpha(opacity:10);
    opacity:0.1;
}
#trainSelected {
    height: 200px;
    width: 100%;
}
</style>

如需要更详细的代码请上github done：https://github.com/nieyangyang712/vue-Rectangular-box-selection

修复bug：

当鼠标超过一个屏了，画的矩形消失了，不显示? 为什么？

修改办法：

在js里面：

修复bug：鼠标的右键事件会影响鼠标的滑动位置，多生成一个矩形框；

解决办法：

1.在 onmousedown 方法里面 禁止右键事件
if(e.button ==2) return false; //禁止鼠标右键事件

2.点击时候，移除创建的矩形框
            //点击后---松开鼠标按钮时
            trainSelected.onmouseup = (event) =>{
                    this.pressed = false; // 禁止拖动
                    trainSelected.onmousemove = null;
                    trainSelected.onmouseup = null;
                    // div.parentNode.removeChild(div); // 移除框选的虚线框
                    // console.log(event,event.button);
                    if(event.button == 0 && event.button == 1 && event.button == 2){
                        div.parentNode.removeChild(div); // 移除框选的虚线框 
                    }
                    // console.log(1);
                    for(let i= 0; i < preBoxs.length; i++){
                        if(preBoxs[i]){
                            trainSelected.removeChild(preBoxs[i])
                        }
                    }
                }

更多方法请移步github：https://github.com/nieyangyang712/mouse-drawing-rectangle