网站建设和推广评价指标,信息技术九年级上册网站咋做,wordpress 同步微信素材,网站建设怎么入会计账这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤#xff1a;按下鼠标#xff0c;移动鼠标#xff0c;松开鼠标。拖拽原理#xff1a;按下…这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤按下鼠标移动鼠标松开鼠标。拖拽原理按下拖拽元素后开始监听文档中鼠标移动事件然后再监听鼠标松开事件鼠标移动时元素div要随着鼠标一起移动需要计算元素div位移的距离(移动的距离鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)。然后松开鼠标时删除移动事件和松开事件元素完成拖拽。一开始先监听鼠标按下事件mousedown事件触发执行mouseHandler函数div.addEventListener(mousedown,mouseHandler);进入mouseHandler函数后进行if else if 的判断如果是按下事件就监听鼠标移动和松开事件这里要用document文档来作为监听对象如果使用元素div监听时如果鼠标在移动过程超出了div元素就无法拖拽元素进入移动事件就把鼠标移动的距离(鼠标离可视窗口的位置 – 鼠标在div中相对于左上角的位置)赋值给元素的left和top元素就可以随着鼠标移动最后进入松开鼠标事件删除了移动和送开鼠标事件元素就会停在鼠标松开的位置关键元素显示位置鼠标离可视窗口的位置 – 鼠标相对于在div元素左上角的位置js代码带注释var divdocument.querySelector(div);var offsetX,offsetY; //定义全局变量用于接收鼠标坐标的变量div.addEventListener(mousedown,mouseHandler);function mouseHandler(e){ //事件的执行函数自带参数eif(e.typemousedown){ //e.type是执行事件的类型offsetXe.offsetX;offsetYe.offsetY;document.addEventListener(mousemove,mouseHandler)document.addEventListener(mouseup,mouseHandler) //如果有鼠标移动或松开事件的发生再次执行mouseHandler函数}else if(e.typemousemove){div.style.lefte.clientX-offsetXpx; //鼠标相对当前可视窗口的坐标 - 相对元素左上角的坐标div.style.tope.clientY-offsetYpx;}else if(e.typemouseup){document.removeEventListener(mousemove,mouseHandler);document.removeEventListener(mouseup,mouseHandler); //删除鼠标移动和鼠标松开事件}}效果如图注意div元素要设置定位才可以进行移动。以上就是本文的全部内容希望对大家的学习有所帮助。
