轉載一個js實現div拖動效果

源代碼的出處在哪我也不知道,我是在德問網上看到的,

覺得還不錯,就拿過來與大家分享,也爲自己保留~~很簡單的一段代碼。

<!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;">
	這裏是層標題
</div> 
</div> 
<script type="text/javascript"> 
var posX; 
var posY; 
fdiv = document.getElementById("f"); 
document.getElementById("title").οnmοusedοwn=function(e) { 
	if(!e) e = window.event; 
	posX = e.clientX - parseInt(fdiv.style.left); 
	posY = e.clientY - parseInt(fdiv.style.top); 
	document.onmousemove = mousemove; 
} 
document.onmouseup = function() { 
	document.onmousemove = null; 
} 
function mousemove(ev) { 
	if(ev==null) ev = window.event; 
	fdiv.style.left = (ev.clientX - posX) + "px"; 
	fdiv.style.top = ev.clientY - posY + "px"; 
} 
</script> 
</body> 
</html>

發佈了25 篇原創文章 · 獲贊 3 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章