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中html()方法使用不当带来的陷阱
Apr 07 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jquery each()源代码
2011/02/14 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
如何使用python切换hosts文件
2020/04/29 Python
Python基于当前时间批量创建文件
2020/05/07 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
总经理岗位职责范本
2014/02/02 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
docker-compose部署Yapi的方法
2022/04/08 Servers