js版的虚线框

要求：实现鼠标点击面板的一个点，拖动到固定的位置，出现虚线框

样图：

 

 

具体的代码实现：

js文件

 

<script>
       window.onload = function(){
            document.onmousedown=function(ev){
                var oEvent=ev||event;
                
                /*检测id为createDiv的div框是否存在，存在就删除*/
                if(document.getElementById("createDiv")!=null){
                    document.body.removeChild(document.getElementById("createDiv"));
                }
                //鼠标点击（down）的初始位置X，Y
                var startX = oEvent.clientX;
                var startY = oEvent.clientY;
                
                console.log("startX:"+startX);
                console.log("startY:"+startY);
                
                document.onmouseup = function(ev){
                           //鼠标拿起（up）时，的具体坐标
                    console.log("endX:"+ev.clientX);
                 console.log("endY:"+ev.clientY);
                
                 //创建div的width、height
                 var widX = ev.clientX - startX;
                 var heiY = ev.clientY - startY;
                    
                  createDiv(startX,startY,widX,heiY);
                } 
            }

       }
       
       //动态创建div
       function createDiv(startX,startY,widthX,heightY){
                   var oDiv=document.createElement('div');
                   oDiv.setAttribute("id","createDiv");
                oDiv.style.left=startX+'px';  // 指定创建的DIV在文档中距离左侧的位置
                oDiv.style.top=startY+'px';  // 指定创建的DIV在文档中距离顶部的位置
                oDiv.style.border='1px dashed red'; // 设置边框
                oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
                oDiv.style.width=widthX+'px'; // 指定宽度
                oDiv.style.height=heightY+'px'; // 指定高度
                document.body.appendChild(oDiv); 
       }
  </script>

 

解析：

1.在页面onload的时候，就监听鼠标的onmousedown和onmouseup时间

2.在onmousedown时记录鼠标的初始位置

3.这里要注意，在onmousedown事件中，需要监听一下onmouseup事件。在onmouseup事件中，创建div框