管理资源吧首页>>>教程>>>编程>>>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> 
<title>代码非常简洁且兼容多浏览器的拖动层</title> 
</head> 
<body> 
<div id="f" style="position: absolute; width: 500px; height: 350px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;"> 
<div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;">这里是层标题glzy8.com</div> 
</div> 
<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%20posX%3B%20%0D%0Avar%20posY%3B%20%0D%0Afdiv%20%3D%20document.getElementById(%22f%22)%3B%20%0D%0Adocument.getElementById(%22title%22).onmousedown%3Dfunction(e)%20%0D%0A%7B%20%0D%0Aif(!e)%20e%20%3D%20window.event%3B%20%0D%0AposX%20%3D%20e.clientX%20-%20parseInt(fdiv.style.left)%3B%20%0D%0AposY%20%3D%20e.clientY%20-%20parseInt(fdiv.style.top)%3B%20%0D%0Adocument.onmousemove%20%3D%20mousemove%3B%20%0D%0A%7D%20%0D%0Adocument.onmouseup%20%3D%20function()%20%0D%0A%7B%20%0D%0Adocument.onmousemove%20%3D%20null%3B%20%0D%0A%7D%20%0D%0Afunction%20mousemove(ev)%20%0D%0A%7B%20%0D%0Aif(ev%3D%3Dnull)%20ev%20%3D%20window.event%3B%20%0D%0Afdiv.style.left%20%3D%20(ev.clientX%20-%20posX)%20%2B%20%22px%22%3B%20%0D%0Afdiv.style.top%20%3D%20ev.clientY%20-%20posY%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程