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对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
javascript相关事件的几个概念
May 21 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
JS内部事件机制之单线程原理
2018/07/02 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python对json的相关操作实例详解
2017/01/04 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python 可视化神器Plotly详解
2020/12/26 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
MYSQL支持事务吗
2013/08/09 面试题
校园摄影活动策划方案
2014/02/05 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
学校证明范文
2015/06/24 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技