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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
深入理解javascript中的this
2021/02/08 Javascript
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
Linux常见面试题
2016/10/04 面试题
优秀村官事迹材料
2014/01/10 职场文书
先进党支部事迹材料
2014/01/13 职场文书
法学院毕业生求职信
2014/06/25 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android