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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JavaScript实现旋转木马轮播图
Mar 16 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
深入理解javascript中的this
Feb 08 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
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
学习python可以干什么
2019/02/26 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
学校搬迁方案
2014/06/15 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技