JavaScript实现的div拖动效果实例代码.docx

JavaScript实现的div拖动效果实例代码JavaScript实现的p拖动效果实例代码在js中要如何实现p拖动的效果，下面YJBYS小编为你带来实例的代码实现段，希望对你有所帮助!js实现的p拖动效果实例代码:p的拖动效果在很多效果中都有应用，当然还有很多附加的功能，本章节只是给拖动效果，并介绍一下它的实现过程。代码实例如下:DOCTYPEhtml>html>head>metacharset="utf-8">metaname="author"content=""/>title>js实现的p拖动效果实例代码title>styletype="text/css">#oDiv{position:absolute;width:100px;height:60px;border:1pxsolidsilver;left:100px;top:100px;z-index:9999;}#move{cursor:move;width:100%;height:15px;background-color:#0066cc;font-size:10px;}#close{float:right;width:10px;height:100%;cursor:hand;background-color:#cc3333;color:White;font-size:15px;}style>scripttype='text/javascript'>varoffset_x;varoffset_y;functionMilan_StartMove(oEvent,p_id){varwhichButton;if(document.all&&oEvent.button==1){whichButton=true;}else{if(oEvent.button==0)whichButton=true;}if(whichButton){offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);document.documentElement.onmousemove=function(mEvent){vareEvent=mEvent||event;varoDiv=p_id;varx=eEvent.clientX-offset_x;vary=eEvent.clientY-offset_y;oDiv.style.left=(x)+"px";oDiv.style.top=(y)+"px";}}}functionMilan_StopMove(oEvent){document.documentElement.onmousemove=null;}functionp_Close(o){o.style.display="none";}window.onload=function(){varomove=document.getElementById("move");varoclose=document.getElementById("close");omove.onmousedown=function(){Milan_StartMove(event,this.parentNode)}omove.onmouseup=function(){Milan_StopMove(event)}oclose.onclick=function(){p_Close(this.parentNode.parentNode)}}script>head>body>pid="oDiv">pid="move">pid="close">Xp>p>p>body>html>以上代码实现了p的拖动效果，下面简单介绍一下此效果的实现过程:一.实现原理:实现的原理非常的简单，就是将被拖动的.p设置为绝对定位，然后根据鼠标指针的坐标不断设定p的left和top属性值即可，当然在此过程中需要用到一些事件或者具体坐标的计算，这里就不介绍了，可以参阅代码注释。二.代码注释:1.varoffset_x,声明一个变量用来存储鼠标指针距离p左边缘的距离。2.varoffset_y,声明一个变量用来存储鼠标指针距离p上边缘的距离。3.functionMilan_StartMove(oEvent,p_id){}，此函数为move元素的onclick事件处理函数，第一个参数是事件对象，第二个是move元素的父元素。4.varwhichButton，声明一个变量，用来存储一个布尔值。5.if(document.all&&oEvent.button==1){}，如果在IE8和IE一下浏览器中，且event的button属性值为1，if