资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20dragElement%20%3D%20null%3B%20%0D%0Avar%20mouseY%3B%20%0D%0Avar%20mouseX%3B%20%0D%0Avar%20x%3D%22%22%3B%20%0D%0Avar%20y%3D%22%22%3B%20%0D%0Avar%20max%20%3D%201%3B%20%0D%0Afunction%20dragInit(node)%7B%20%0D%0Aif(node.className%20%3D%3D%20%22drag%22)%7B%20%0D%0Anode.onmousedown%20%3D%20down%3B%20%0D%0Adocument.onmousemove%20%3D%20move%3B%20%0D%0Anode.onmouseover%20%3D%20over%3B%20%0D%0Anode.style.position%20%3D%20%22relative%22%3B%20%0D%0Anode.dragging%20%3D%20false%3B%20%0D%0A%7D%20%0D%0Avar%20children%20%3D%20node.childNodes%3B%20%0D%0Afor(var%20i%20%3D%200%3Bi%20%3C%20children.length%3B%20i%2B%2B)%7B%20%0D%0AdragInit(children%5Bi%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0AdragInit(document)%3B%20%0D%0Adocument.onmouseup%20%3D%20docUp%3B%20%0D%0A%7D%20%0D%0Afunction%20down(event)%20%0D%0A%7B%20%0D%0Aevent%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0AdragElement%20%3D%20this%3B%20%0D%0AmouseX%20%3D%20parseInt(event.clientX)%3B%20%0D%0AmouseY%20%3D%20parseInt(event.clientY)%3B%20%0D%0AobjY%20%3D%20parseInt(getNodeStyle(dragElement%2C%22top%22))%3B%20%0D%0AobjX%20%3D%20parseInt(getNodeStyle(dragElement%2C%22left%22))%3B%20%0D%0A%2F%2FIE%E4%B8%8D%E8%BF%94%E5%9B%9E%E6%9C%AA%E8%AE%BE%E7%BD%AE%E7%9A%84CSS%E5%B1%9E%E6%80%A7%20%0D%0Aif(!objY)objY%3D0%3B%20%0D%0Aif(!objX)objX%3D0%3B%20%0D%0Athis.style.zIndex%20%3D%20max%2B%2B%3B%20%0D%0A%7D%20%0D%0Afunction%20move(event)%7B%20%0D%0Aevent%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0Aif(dragElement)%7B%20%0D%0Avar%20x%2Cy%3B%20%0D%0Ay%20%3D%20event.clientY%20-%20mouseY%20%2B%20objY%3B%20%0D%0Ax%20%3D%20event.clientX%20-%20mouseX%20%2B%20objX%3B%20%0D%0AdragElement.style.top%20%3D%20y%20%2B%20%22px%22%3B%20%0D%0AdragElement.style.left%20%3D%20x%20%2B%20%22px%22%3B%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%AE%8C%E5%85%83%E7%B4%A0%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%BB%B6%E8%BF%9F%E4%B8%80%E6%AE%B5%E6%97%B6%E9%97%B4%20%0D%0Adocument.onmousemove%20%3D%20null%3B%20%0D%0AsetTimeout(%22document.onmousemove%20%3D%20move%3B%22%2C40)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20docUp()%7B%20%0D%0AdragElement%20%3D%20null%3B%20%0D%0A%7D%20%0D%0Afunction%20over()%7B%20%0D%0Athis.style.cursor%20%3D%20%22move%22%3B%20%0D%0A%7D%20%0D%0Afunction%20getNodeStyle(node%2CstyleName)%7B%20%0D%0Avar%20realStyle%20%3D%20null%3B%20%0D%0Aif(node.currentStyle)%7B%20%0D%0ArealStyle%20%3D%20node.currentStyle%5BstyleName%5D%3B%20%0D%0A%7Delse%20if(window.getComputedStyle)%7B%20%0D%0ArealStyle%20%3D%20window.getComputedStyle(node%2Cnull)%5BstyleName%5D%3B%20%0D%0A%7D%20%0D%0Areturn%20realStyle%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程