基于Vue实现元素拖拽效果

在实现拖拽效果时需要先理解clientY pageY screenY layerY offsetY的区别
clientY 指的是距离可视页面左上角的距离
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
offsetY 指的是距离它自己左上角的距离
思路
onmousedown:鼠标按下事件
onmousemove:鼠标移动事件
onmouseup:鼠标抬起事件
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下

拖拽状态 = 鼠标在元素上按下的时候{      
    记录下鼠标的x和y坐标      
    记录下元素的x和y坐标      
   }   
鼠标在元素上移动的时候{      
    元素y = 现在鼠标y - 原来鼠标y + 原来元素y      
    元素x = 现在鼠标x - 原来鼠标x + 原来元素x      
    }      
鼠标在任何时候放开的时候{      
   鼠标弹起来的时候不再移动      
} 

直接上代码,代码中有注释





你可能感兴趣的:(前端,vue.js,javascript,css)