JS鼠标拖动示例分析
本文介绍了JS鼠标拖放的实现方法。分享给大家参考,如下:
JS代码:
script window . onload=function(){ var oDiv=document . getelementbyid(' div ');var DIsX=0;var DIsy=0;奥迪夫。onmousedown=function(ev)//按DIV { var oEvent=ev | | eventdisX=oevent . clientx-odiv . offsetleft;//鼠标的x坐标减去DIV的左边距等于disX,用来确定鼠标移动DIV时,鼠标点与DIV的左边距,这个距离不会改变。从这个新鼠标的x坐标中减去disX就是DIV的left disy=oevent . clienty-odiv . offset top;//鼠标的y坐标减去DIV的左边距等于disY。这个disY用于确定鼠标移动DIV时,鼠标点和DIV之间的上距离。这个距离不会改变。这个新鼠标的y坐标减去disY就是DIV的顶文档。onmousemove=function(ev)//为了防止鼠标移动过快而离开DIV,产生了一个bug,所以应该在整个页面中加入onmousemove事件{ var oEvent=ev | |事件;var oLeft=oevent . client x-DIsX;//新鼠标的x坐标减去disX,即鼠标移动DIV后的left var otop=oevent . clienty-disy;//新鼠标的y坐标减去disY,即鼠标移动DIV后的top if(oLeft 0)//当DIV的左边小于0时,即移出左边{ oLeft=0;//将DIV的Left设置为0,不能移出左边。} else if(oleftdocument . document element . client width-Odiv . offset with)//从屏幕宽度中减去DIV的宽度,得到到达最右侧的DIV的宽度。如果Left大于此像素{ oleft=document . document element . client width-odiv . offset with;//当DIV的To小于0时,即移出左边{ oTop=0;//将DIV的Top设置为0,不能移出Top } else if(otopdocument . document element . client height-odiv . offset height)//从屏幕高度减去DIV的高度,得到DIV到达底边的像素。如果Top大于此像素{ otop=document . document element . client height-odiv . offset theight;//将Top设置为此像素} odiv . style . left=oLeft ' px ';//DIV的Left被设置为新的鼠标x坐标减去disX oDiv.style.top=oTop 'px '的值;//DIV的Top设置为新鼠标y坐标减去disY}的值;document . onmouseup=function()//{ document . onmousemove=鼠标释放时为null//把鼠标移动清楚。document.onmouseup=null//明确释放鼠标};返回false//阻止FireFox的默认事件bug };};/script完整代码:
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;Charset=utf-8' /title无标题文档/title style div { width :200 px;高度:200 px;背景:黑色;位置:绝对;top:0left:0}/style script window . onload=function(){ var oDiv=document . getelementbyid(' div ');var DIsX=0;var DIsy=0;奥迪夫。onmousedown=function(ev)//按DIV { var oEvent=ev | | eventdisX=oevent . clientx-odiv . offsetleft;//鼠标的x坐标减去DIV的左边距等于disX,用来确定鼠标移动DIV时,鼠标点与DIV的左边距,这个距离不会改变。从这个新鼠标的x坐标中减去disX就是DIV的left disy=oevent . clienty-odiv . offset top;//鼠标的y坐标减去DIV的左边距等于disY。这个disY用于确定鼠标移动DIV时,鼠标点和DIV之间的上距离。这个距离不会改变。这个新鼠标的y坐标减去disY就是DIV的顶文档。onmousemove=function(ev)//为了防止鼠标移动过快而离开DIV,产生了一个bug,所以应该在整个页面中加入onmousemove事件{ var oEvent=ev | |事件;var oLeft=oevent . client x-DIsX;//新鼠标的x坐标减去disX,即鼠标移动DIV后的left var otop=oevent . clienty-disy;//新鼠标的y坐标减去disY,即鼠标移动DIV后的top if(oLeft 0)//当DIV的左边小于0时,即移出左边{ oLeft=0;//将DIV的Left设置为0,不能移出左边。} else if(oleftdocument . document element . client width-Odiv . offset with)//从屏幕宽度中减去DIV的宽度,得到到达最右侧的DIV的宽度。如果Left大于此像素{ oleft=document . document element . client width-odiv . offset with;//当DIV的To小于0时,即移出左边{ oTop=0;//将DIV的Top设置为0,不能移出Top } else if(otopdocument . document element . client height-odiv . offset height)//从屏幕高度减去DIV的高度,得到DIV到达底边的像素。如果Top大于此像素{ otop=document . document element . client height-odiv . offset theight;//将Top设置为此像素} odiv . style . left=oLeft ' px ';//DIV的Left设置为新的鼠标x坐标减去disX oDiv.style.top=oTop 'px '的值;//DIV的Top设置为新鼠标y坐标减去disY}的值;document . onmouseup=function()//{ document . onmousemove=鼠标释放时为null//把鼠标移动清楚。document.onmouseup=null//明确释放鼠标};返回false//阻止FireFox的默认事件bug };};/script/head dydiv id=' div '/div/body/html希望这篇文章对JavaScript编程有所帮助。
版权声明:JS鼠标拖动示例分析是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。