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 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
vue二级路由设置方法
Feb 09 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php array_search() 函数使用
2010/04/13 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
jQuery的事件委托实例分析
2015/07/15 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
Python自动登录QQ的实现示例
2020/08/28 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
庆八一活动方案
2014/01/25 职场文书
气象学专业个人求职信
2014/03/15 职场文书
一般党员对照检查材料
2014/09/24 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript