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中关于new Object时传参的一些细节分析
Mar 13 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
javascript与有限状态机详解
May 08 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vue绑定内联样式问题
Oct 17 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 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 return语句另类用法不止是在函数中
2014/09/17 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python生成器与迭代器详解
2019/01/01 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python实现交并比IOU教程
2020/04/16 Python
简单了解python列表和元组的区别
2020/05/14 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
美国折扣网站:jClub
2017/08/07 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
出售房屋委托书范本
2014/09/24 职场文书
内勤岗位职责
2015/02/10 职场文书
导游词格式
2015/02/13 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL
sql server 累计求和实现代码
2022/02/28 SQL Server