介绍
这篇文章主要讲解了js拖拽效果的实现方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标。
拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件;鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离(移动的距离=鼠标离可视窗口的位置,鼠标在div中相对于左上角的位置),然后松开鼠标时,删除移动事件和松开事件,元素完成拖拽。
一开始先监听鼠标按下事件mousedown,事件触发执行mouseHandler函数;
div.addEventListener (“mousedown" mouseHandler);
进入mouseHandler函数后,进行如果其他的判断,如果是按下事件,就监听鼠标移动和松开事件,这里要用文档文档来作为监听对象,如果使用元素div监听时,如果鼠标在移动过程超出了div元素,就无法拖拽元素;
进入移动事件,就把鼠标移动的距离(鼠标离可视窗口的位置,鼠标在div中相对于左上角的位置)赋值给元素的左边和顶部,元素就可以随着鼠标移动;
最后进入松开鼠标事件,删除了移动和送开鼠标事件,元素就会停在鼠标松开的位置
关键:元素显示位置=鼠标离可视窗口的位置,鼠标相对于在div元素左上角的位置
js代码带注释
var div=document.querySelector (“div");
var offsetX offsetY;//定义全局变量用于接收鼠标坐标的变量
div.addEventListener (“mousedown" mouseHandler);
函数mouseHandler (e){//事件的执行函数自带参数e
如果(e.type===癿ousedown") {//e.type是执行事件的类型
offsetX=e.offsetX;
offsetY=e.offsetY;
document.addEventListener (“mousemove" mouseHandler)
document.addEventListener (“mouseup" mouseHandler)//如果有鼠标移动或松开事件的发生再次执行mouseHandler函数
}else if (e.type===癿ousemove") {
div.style.left=e.clientX-offsetX +“px";//鼠标相对当前可视窗口的坐标——相对元素左上角的坐标
div.style.top=e.clientY-offsetY +“px";
}else if (e.type===癿ouseup") {
document.removeEventListener (“mousemove" mouseHandler);
document.removeEventListener (“mouseup" mouseHandler);//删除鼠标移动和鼠标松开事件
}
} 效果如图:
注意:div元素要设置定位才可以进行移动。
看完上述内容,是不是对js拖拽效果的实现方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
