软件开发培训班 >> 编程开发 >> JavaScript

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 class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/net/html/68723.html"  target=_blank > 网站优化seo中网站收录变化原因及解决方法 </a></td><td><a href="http://www.zhujiangroad.com/notebook/news/2022/7a17650.html"  target=_blank > 笔记本电脑到底需不需要OLED屏？ </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2021/8m83803.html"  target=_blank > 算法不是某些互联网平台唯利是图的“遮羞布” </a></td><td><a href="http://www.zhujiangroad.com/net/news/2020/12m82485.html"  target=_blank > 5G基站功耗惊人不容忽视  5年后占社会总电量的2.1% </a></td></tr></table></div> 
</div> 
</body> 
</html>

技术文章快速查找

javascript实现的柱状统计图表

原型方法的不同写法居然会影响调试的解决方法

JS 文件本身编码转换图文教程

瞻望J2ME前景，看J2ME路在何方？

iframe 父窗口和子窗口相互的调用方法集锦

10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)

调用IE7 JS Library库巧解IE兼容性问题

Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建