前端实现鼠标拖拽功能

前端实现鼠标拖拽功能

1.实现拖拽

页面：

   <div @mousedown="move" style="position: relative; "> 
  	 待拖动div 
   </div>

实现方法：

        move(e){
            let odiv = e.currentTarget ;        //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;    
                let top = e.clientY - disY;
                //改变元素位置属性值，移动当前元素
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
            };
            document.onmouseup = (e) => { // 鼠标松开后不再移动
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }