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
拖动

javascript滚轮控制模拟滚动条
这篇文章主要为大家详细介绍了javascript滚轮控制模拟滚动条的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JavaScript 使用Ckeditor+Ckfinder文件上传案例详解
这篇文章主要介绍了JavaScript 使用Ckeditor+Ckfinder文件上传案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
JS实现拖拽进度条改变元素透明度
这篇文章主要为大家详细介绍了JS实现拖拽进度条改变元素透明度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
javascript异常处理实现原理详解
这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
javascript关键字加亮加连接
我想在页面里把想要的关键词加亮凸出(用颜色区分出来)显示,这样让客户一眼能看到重的东西,然后在加亮的关键词上可以加上超连接.请问高手们怎么实现宋的功能.就像搜索引擎的那种..搜索关键词的时候就显示红色的.
2008-06-06
jser必看的破解javascript各种加密的反向思维方法
才发现的破解javascript各种加密的反向思维方法,大家有好的方法都跟帖啊最近发现了一个代码，加密了5层左右，我将破解到最后一步，而且不用javascript解密程序
2007-04-04
浅谈Webpack多页应用HMR卡住问题
这篇文章主要介绍了浅谈Webpack多页应用HMR卡住问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
js实现文字跑马灯效果
本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
原生js实现简单的链式操作
这篇文章主要介绍了原生js实现简单的链式操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
jQuery 表单验证插件formValidation实现个性化错误提示
这里介绍另外一个表单验证插件formValidation，这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息，显示在表单元素右上角类似于提示条
2009-06-06