首页 > 网络编程 > JavaScript > javascript技巧 > 随意拖动的小方块

js网页中随意拖动的小方块实现代码

2008-08-29 09:17:55 作者：

用CSS和JS制作的在网页中可以随意拖动的小方块。

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0]);"></div> 
<script> 
function divBlock_event_mousedown(e){ 
var e, obj, temp; 
obj=document.getElementById("divBlock"); 
e=window.event?window.event:e; 
obj.startX=e.clientX-obj.offsetLeft; 
obj.startY=e.clientY-obj.offsetTop; 
document.onmousemove=document_event_mousemove; 
temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,""); 
} 
function document_event_mousemove(e){ 
var e, obj; 
obj=document.getElementById("divBlock"); 
e=window.event?window.event:e; 
with(obj.style){ 
position="absolute"; 
left=e.clientX-obj.startX+"px"; 
top=e.clientY-obj.startY+"px"; 
} 
} 
function document_event_mouseup(e){ 
var temp; 
document.onmousemove=""; 
temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,""); 
} 
</script>

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

js网页中随意拖动的小方块实现代码

您可能感兴趣的文章: