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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
微信小程序云函数添加数据到数据库的方法
Mar 04 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
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
高考自主招生自荐信
2013/10/20 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
写得不错的求职信范文
2014/07/11 职场文书
就业证明函
2015/06/17 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
HttpClient实现文件上传功能
2022/08/14 Java/Android