JS实现超简单的鼠标拖动效果


Posted in Javascript onNovember 02, 2015

本文实例讲述了JS实现超简单的鼠标拖动效果。分享给大家供大家参考,具体如下:

这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符。。。如果不是考虑兼容性和变量封装,还可以更短点。

运行效果截图如下:

JS实现超简单的鼠标拖动效果

在线演示地址如下:

具体代码如下:

<title>尽可能短的写一个JS拖动</title>
<body>
<div id="demo" style="width:100px; height:100px; position:absolute; background-color:silver;"></div>
<script>
function dragable(id){var d=document,o=d.getElementById(id),s=o.style,x,y,p='onmousemove';o.onmousedown=function(e){e=e||event;x=e.clientX-o.offsetLeft;y=e.clientY-o.offsetTop;d[p]=function(e){e=e||event;s.left=e.clientX-x+'px';s.top=e.clientY-y+'px'};d.onmouseup=function(){d[p]=null}}}
dragable("demo");
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
基于Jquery实现万圣节快乐特效
Nov 01 #Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 #Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 #Javascript
You might like
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP实现计算器小功能
2020/08/28 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现线程池的方法
2015/06/30 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
详解python eval函数的妙用
2017/11/16 Python
python字符串的方法与操作大全
2018/01/30 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
小学音乐教学反思
2014/02/05 职场文书
党支部公开承诺书
2014/03/28 职场文书
2014年评职称工作总结
2014/11/20 职场文书
期中考试复习计划
2015/01/19 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
教师节获奖感言
2015/07/31 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers