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来定位
Feb 20 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
vue.js实现简单购物车功能
May 30 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
理解Python中函数的参数
2015/04/27 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python opencv之SURF算法示例
2018/02/24 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
经销商订货会主持词
2014/03/27 职场文书
师德师风个人反思
2014/04/28 职场文书
办理房产证委托书
2014/09/18 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
导游词之西安骊山
2019/12/20 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android