首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > javascript拖动小方块

javascript 随意拖动的小方块特效

2008-11-25 20:00:10 作者：

可以拖动的小方块代码

<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需刷新才能执行]