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 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
简述JS控制台的使用
Jul 15 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP之COOKIE支持详解
2010/09/20 PHP
php 文件缓存函数
2011/10/08 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
AngularJS日程表案例详解
2017/08/15 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Python快速从注释生成文档的方法
2016/12/26 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
几款好用的python工具库(小结)
2020/10/20 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
护士专业推荐信
2013/11/02 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
党员转正申请报告
2015/05/15 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书