前端实现鼠标拖拽功能

1.实现拖拽

页面：

   
 
  	 待拖动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;
            };
        }    

2.$event事件

• e.target 是你当前点击的元素
• e.currentTarget 是你绑定事件的元素
• 获得点击元素的前一个元素
  e.currentTarget.previousElementSibling.innerHTML
• 获得点击元素的第一个子元素
  e.currentTarget.firstElementChild
• 获得点击元素的下一个元素
  e.currentTarget.nextElementSibling
• 获得点击元素中id为string的元素
  e.currentTarget.getElementById(“string”)
• 获得点击元素的string属性
  e.currentTarget.getAttributeNode(‘string’)
• 获得点击元素的父级元素
  e.currentTarget.parentElement
• 获得点击元素的前一个元素的第一个子元素的HTML值
  e.currentTarget.previousElementSibling.firstElementChild.innerHTML

3.clientY、pageY、screenY、layerY、offsetY的区别

			clientY 指的是距离可视页面左上角的距离
			pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
			screenY 指的是距离屏幕左上角的距离
			layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
			offsetY 指的是距离它自己左上角的距离