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 个人笔记(没有整理,很乱)
Jul 07 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
Augularjs-起步详解
Jul 08 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
vue实现axios图片上传功能
Aug 20 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python实现动态创建类的方法分析
2019/06/25 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
高中自我鉴定范文
2013/11/03 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
天网工程实施方案
2014/03/26 职场文书
政治思想表现评语
2014/05/04 职场文书
教师节演讲稿
2014/05/06 职场文书
优秀员工推荐材料
2014/12/20 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers