预览加载中，请您耐心等待几秒...

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

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共12页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

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">X</p></p></p></body></html>以上代码实现了p的拖动效果，下面简单介绍一下此效果的实现过程:一.实现原理:实现的原理非常的简单，就是将被拖动的.p设置为绝对定位，然后根据鼠标指针的坐标不断设定p的left和top属性值即可，当然在此过程中需要用到一些事件或者具体坐标的计算，这里就不介绍了，可