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面试题与Javascript词法作用域说明
Nov 09 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
如何使用PHP中的字符串函数
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
隐性调用php程序的方法
2015/06/13 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
JS实现简单拖拽效果
2017/06/21 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
通过循环优化 JavaScript 程序
2019/06/24 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
元旦活动感言
2014/03/08 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
房产公证书样本
2015/01/23 职场文书
活动新闻稿范文
2015/07/17 职场文书
公司出差管理制度范本
2015/08/05 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android