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网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 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
理解JavaScript中的事件
2006/09/23 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
老生常谈ES6中的类
2017/07/31 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
获取Django项目的全部url方法详解
2017/10/26 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python上selenium的弹框操作实现
2020/07/13 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL