实现元素可拖拽

水深无声 2023-03-03 11:12 40阅读 0赞

# 1、思路 #

*  记录开始时元素的位置（divX，divY）
 *  记录刚开始拖拽时（刚按下鼠标时）鼠标的位置（startMouseX，startMouseY）
 *  记录下拖拽结束时（松开鼠标时）鼠标的位置（endMouseX，endMouseY）
 *  那么–拖拽结束时，元素的位置为（endMouseX-startMouseX+divX，endMouseY-endMouseY+divY）

# 2、相关方法 #

*  onmousedown ：按下鼠标时触发
 *  onmousemove：按住鼠标拖动时触发
 *  onmouseup：松开鼠标时触发

# 3、简单实现 #

// css部分
      *{ 
          padding:0;
          margin:0;
       }
       body{ 
           position: relative;
           height: 500px;
       }
       .drag-item{ 
           width: 300px;
           height: 200px;
           position: absolute;
           top:0;
           left:0;
           background-color: tomato;
       }
    // HTML部分
    <div class="drag-item"></div>
    
    // js部分
     var dragItem=document.getElementsByClassName("drag-item")[0];
            var divX,divY,startMouseX,startMouseY,endMouseX,endMosueY,drag=false; // 元素位置x,y，开始鼠标位置x,y， 结束鼠标位置x,y ， 是否拖拽的标志位
    
            
            dragItem.onmousedown=function(e){ 
                var tag=e.target;
                drag=true;
                divX=tag.offsetLeft; // 元素开始位置
                divY=tag.offsetTop;
                startMouseX=e.clientX; // 鼠标的开始位置 
                startMouseY=e.clientY;          
            }
            dragItem.onmousemove=function(e){ 
                console.log(888)
                
                if(drag){ 
                    endMouseX=e.clientX;
                    endMosueY=e.clientY;
                    var currentdivX=e.clientX-startMouseX+divX; //当前元素的位置
                    var currentdivY=e.clientY-startMouseY+divY;
                   
                    dragItem.style.top=currentdivY+"px"; 
                    dragItem.style.left=currentdivX+"px";
                }
            }
            dragItem.onmouseup=function(e){ 
                drag=false;
            }

这样就已经实现了元素的拖拽。

# 4、优化 #

在测试上面的拖拽效果时，确实可以实现元素的拖拽，但是有个问题，元素会被拖拽到了可视区域的外面。在某些场景下，我们希望元素仅仅在可视区域内部进行拖拽。

# 5、可拖拽距离 #

既然元素要在可视范围内拖拽，那么知道元素可以拖拽的距离是非常必要的。

*  水平方向可拖拽最大距离：可视区域宽度-元素的宽度 ------> 即元素的水平位置不能大于
 *  水平方向可拖拽最小距离：0 ------> 元素的水平位置不能小于
 *  垂直方向可拖拽最大距离：可视区域高度-元素的高度 ------> 元素的垂直位置不能大于
 *  垂直方向可拖拽最小距离：0 ------> 元素的垂直位置不能小于

# 仅在可视区域内进行拖拽的代码 #