页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容随意拖动的小方块

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

发布：dxy 字体：[增加减小] 类型：转载

用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 全选提示:你可先修改部分代码,再按运行]

Tags：js 拖动

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：Javascript 注册事件浅析
下一篇文章：asp 取文本框名称代码

·在百度中搜索关于“js网页中随意拖动的小方块实现代码相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行