资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
<!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>完美拖拽</title> <style type="text/css"> html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;} #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;} </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%0Awindow.onload%3Dfunction%20()%20%0D%0A%7B%20%0D%0Avar%20oBox%3Ddocument.getElementById(%22box%22)%3B%20%0D%0Avar%20oH2%20%3D%20oBox.getElementsByTagName(%22h2%22)%5B0%5D%3B%20%0D%0Avar%20oA%20%3D%20oBox.getElementsByTagName(%22a%22)%5B0%5D%3B%20%0D%0Avar%20aSpan%20%3D%20oBox.getElementsByTagName(%22span%22)%3B%20%0D%0Avar%20disX%20%3D%20disY%20%3D%200%3B%20%0D%0Avar%20bDrag%20%3D%20false%3B%20%0D%0Avar%20aPos%20%3D%20%5B%7Bx%3AoBox.offsetLeft%2C%20y%3AoBox.offsetTop%7D%5D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E6%8C%89%E4%B8%8B%2C%20%E6%BF%80%E6%B4%BB%E6%8B%96%E6%8B%BD%20%0D%0AoH2.onmousedown%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0Avar%20event%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0AbDrag%20%3D%20true%3B%20%0D%0AdisX%20%3D%20event.clientX%20-%20oBox.offsetLeft%3B%20%0D%0AdisY%20%3D%20event.clientY%20-%20oBox.offsetTop%3B%20%0D%0AaPos.push(%7Bx%3AoBox.offsetLeft%2C%20y%3AoBox.offsetTop%7D)%20%0D%0Athis.setCapture%20%26%26%20this.setCapture()%3B%20%0D%0Areturn%20false%20%0D%0A%7D%3B%20%0D%0A%0D%0A%2F%2F%E6%8B%96%E6%8B%BD%E5%BC%80%E5%A7%8B%20%0D%0Adocument.onmousemove%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0Aif%20(!bDrag)%20return%3B%20%0D%0Avar%20event%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0Avar%20iL%20%3D%20event.clientX%20-%20disX%3B%20%0D%0Avar%20iT%20%3D%20event.clientY%20-%20disY%3B%20%0D%0Avar%20maxL%20%3D%20document.documentElement.clientWidth%20-%20oBox.offsetWidth%3B%20%0D%0Avar%20maxT%20%3D%20document.documentElement.clientHeight%20-%20oBox.offsetHeight%3B%20%0D%0AiL%20%3D%20iL%20%3C%200%20%3F%200%20%3A%20iL%3B%20%0D%0AiL%20%3D%20iL%20%3E%20maxL%20%3F%20maxL%20%3A%20iL%3B%20%0D%0A%0D%0AiT%20%3D%20iT%20%3C%200%20%3F%200%20%3A%20iT%3B%20%0D%0AiT%20%3D%20iT%20%3E%20maxT%20%3F%20maxT%20%3A%20iT%3B%20%0D%0AoBox.style.marginTop%20%3D%20oBox.style.marginLeft%20%3D%200%3B%20%0D%0AoBox.style.left%20%3D%20iL%20%2B%20%22px%22%3B%20%0D%0AoBox.style.top%20%3D%20iT%20%2B%20%22px%22%3B%20%0D%0AaPos.push(%7Bx%3AiL%2C%20y%3AiT%7D)%20%0D%0Astatus()%3B%20%0D%0Areturn%20false%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E9%87%8A%E6%94%BE%2C%20%E7%BB%93%E6%9D%9F%E6%8B%96%E6%8B%BD%20%0D%0Adocument.onmouseup%20%3D%20window.onblur%20%3D%20oH2.onlosecapture%20%3D%20function%20()%20%0D%0A%7B%20%0D%0AbDrag%20%3D%20false%3B%20%0D%0AoH2.releaseCapture%20%26%26%20oH2.releaseCapture()%3B%20%0D%0Astatus()%20%0D%0A%7D%3B%20%0D%0A%0D%0A%2F%2F%E5%9B%9E%E6%94%BE%E6%8B%96%E5%8A%A8%E8%BD%A8%E8%BF%B9%20%0D%0AoA.onclick%20%3D%20function%20()%20%0D%0A%7B%20%0D%0Aif%20(aPos.length%20%3D%3D%201)%20return%3B%20%0D%0Avar%20timer%20%3D%20setInterval(function%20()%20%0D%0A%7B%20%0D%0Avar%20oPos%20%3D%20aPos.pop()%3B%20%0D%0AoPos%20%3F%20(oBox.style.left%20%3D%20oPos.x%20%2B%20%22px%22%2C%20oBox.style.top%20%3D%20oPos.y%20%2B%20%22px%22%2C%20status())%20%3A%20clearInterval(timer)%20%0D%0A%7D%2C%2030)%3B%20%0D%0A%0D%0Athis.focus%20%3D%20false%3B%2F%2F%E5%8E%BB%E9%99%A4%E9%93%BE%E6%8E%A5%E8%99%9A%E7%BA%BF%20%0D%0A%0D%0Areturn%20false%20%0D%0A%7D%3B%20%0D%0A%0D%0A%2F%2F%E9%98%BB%E6%AD%A2%E5%86%92%E6%B3%A1%20%0D%0AoA.onmousedown%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0A(event%20%7C%7C%20window.event).cancelBubble%20%3D%20true%20%0D%0A%7D%3B%20%0D%0A%0D%0A%2F%2F%E7%9B%91%E5%90%AC%E7%8A%B6%E6%80%81%E5%87%BD%E6%95%B0%20%0D%0Afunction%20status%20()%20%0D%0A%7B%20%0D%0AaSpan%5B0%5D.innerHTML%20%3D%20bDrag%3B%20%0D%0AaSpan%5B1%5D.innerHTML%20%3D%20oBox.offsetTop%3B%20%0D%0AaSpan%5B2%5D.innerHTML%20%3D%20oBox.offsetLeft%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%88%9D%E5%A7%8B%E8%B0%83%E7%94%A8%20%0D%0Astatus()%20%0D%0A%7D%3B%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div id="box"> <h2><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B">点击回放拖动轨迹</a></h2> <p><strong>Drag:</strong><span></span></p> <p><strong>offsetTop:</strong><span></span></p> <p><strong>offsetLeft:</strong><span></span></p> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程