vue实现鼠标框选功能
经手的项目中需要实现鼠标的框选功能,just do it!
首先先实现鼠标拖拽,创建框选范围的div。
遇到问题是mousedown事件和mousemove事件之间的冲突
mousemove事件卸载mousedown事件里面,且一定要加上mouseup,不能直接在元素中添加,元素中添加mousedown。
1 mousedown(e) { 2 var create = document.createElement("div") 3 $('.form_cont').append(create) 4 document.onmousemove = e => { 5 let left = e.clientX; 6 let right = e.clientY; 7 create.style.width = left + "px" 8 create.style.height = right + "px" 9 console.log("鼠标X是"+left, "Y是"+right); 10 }; 11 document.onmouseup = e => { 12 create.remove() 13 document.onmousemove = null; 14 document.onmouseup = null; 15 }; 16 }
海上月是天上月,眼前人是心上人。

浙公网安备 33010602011771号