JavaScript拖拽效果示例网页解决快速拖拽的问题

更新时间：2012年09月04日 23:18:44 作者：

JavaScript拖拽文章的配套示例网页。本例解决了快速拖拽的时候元素停止移动的问题，需要的朋友可以参考下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript拖拽示例网页——解决快速拖拽的问题</title> <meta name="Description" content="JavaScript拖拽文章的配套示例网页。本例解决了快速拖拽的时候元素停止移动的问题。" /> <meta name="Keywords" content="拖拽,实例,DOM,JavaScript,JScript" /> <style type="text/css"> .drag{border:1px solid; width:400px; background:#CCCCCC;} #test1{ top:20px;} #test2{ left:40px;} </style> <script type="text/javascript"> var dragElement = null; var mouseY; var mouseX; var x=""; var y=""; var max = 1; function dragInit(node){ if(node.className == "drag"){ node.onmousedown = down; document.onmousemove = move; node.onmouseover = over; node.style.position = "relative"; node.dragging = false; } var children = node.childNodes; for(var i = 0;i < children.length; i++){ dragInit(children[i]); } } window.onload = function(){ dragInit(document); document.onmouseup = docUp; } function down(event) { event = event || window.event; dragElement = this; mouseX = parseInt(event.clientX); mouseY = parseInt(event.clientY); objY = parseInt(getNodeStyle(dragElement,"top")); objX = parseInt(getNodeStyle(dragElement,"left")); //IE不返回未设置的CSS属性 if(!objY)objY=0; if(!objX)objX=0; this.style.zIndex = max++; } function move(event){ event = event || window.event; if(dragElement){ var x,y; y = event.clientY - mouseY + objY; x = event.clientX - mouseX + objX; dragElement.style.top = y + "px"; dragElement.style.left = x + "px"; //移动完元素之后，延迟一段时间 document.onmousemove = null; setTimeout("document.onmousemove = move;",40); } } function docUp(){ dragElement = null; } function over(){ this.style.cursor = "move"; } function getNodeStyle(node,styleName){ var realStyle = null; if(node.currentStyle){ realStyle = node.currentStyle[styleName]; }else if(window.getComputedStyle){ realStyle = window.getComputedStyle(node,null)[styleName]; } return realStyle; } </script> </head> <body> <div class="drag" id="test1"> <p>我是拖拽示例DIV1。</p> <p>可以试验一下效果。</p> </div> <div class="drag" id="test2"> <p>我是拖拽示例DIV2。</p> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

拖拽

JavaScript拖拽效果示例网页解决快速拖拽的问题
JavaScript拖拽文章的配套示例网页。本例解决了快速拖拽的时候元素停止移动的问题，需要的朋友可以参考下
2012-09-09
随鼠标移动的图片或文字特效代码
随鼠标移动的图片或文字特效！，需要的朋友可以参考下。
2011-04-04
鼠标跟随效果代码
鼠标跟随效果,好多用于广告点击,提示效果
2008-10-10
js抓人游戏
利用鼠标的位置进行计算偏移代码
2008-09-09
鼠标跟随的文字变动效果
百度空间的一个好友，其主页的特效非常漂亮，其中最拉风的就是鼠标根随的文字变动效果。懒得看乱七八糟的源文件，自己用DW编写JS模拟了下。
2009-11-11
使用JS实现一个跟随鼠标移动洒落的星星特效
这篇文章主要介绍了使用JS实现一个跟随鼠标移动洒落的星星特效,在页面上移动鼠标,移动轨迹上会有星星洒落,非常的好看炫酷,想知道怎么做的朋友一起来看看吧
2023-03-03
跟随鼠标旋转的文字
跟随鼠标旋转的文字...
2006-11-11
javascript跟随鼠标的文字带滚动效果
javascript跟随鼠标的文字带滚动效果...
2007-11-11
我的柜子好像动了之鼠标跟踪事件教程
这篇文章主要为大家介绍了我的柜子好像动了之鼠标跟踪事件教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
跳舞的小人鼠标跟随事件效果实现
这篇文章主要为大家介绍了跳舞的小人，鼠标跟随事件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05