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编程有所帮助。