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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
script标签属性用type还是language
Jan 21 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 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中判断变量为空的几种方法分享
2013/08/26 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
跟老齐学Python之复习if语句
2014/10/02 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
2014年大班保育员工作总结
2014/12/02 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
Python实现双向链表
2022/05/25 Python