javascript 鼠标拖动图标技术


Posted in Javascript onFebruary 07, 2010

这个例子简单讲就是鼠标拖动图标到它任意想去的地方
代码

<body> 
<div id="block" style="width:100px; height:100px; position:relative; background-color:#FF0000";></div> 
<script> 
var bb = document.getElementById("block"); 
bb.onmousedown = function(){ 
//获取鼠标当前坐标 
var pageX = event.clientX; 
var pageY = event.clientY; 
//获取block的坐标,左边界和上边界 
var offX = parseInt(this.style.left)||0; 
var offY = parseInt(this.style.top)||0; 
//计算出鼠标坐标相对于block坐标的间距 
var offLX = pageX-offX; 
var offLY = pageY-offY; 
if(!document.onmousemove){ 
document.onmousemove = function(){ 
bb.style.left=event.clientX-offLX; //设置block的X坐标 
bb.style.top=event.clientY-offLY; //设置block的Y坐标 
} 
} 
} 
document.onmouseup = function(){document.onmousemove = null;} //鼠标弹起 
</script> 
</body>
Javascript 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 #Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 #Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 #Javascript
一些mootools的学习资源
Feb 07 #Javascript
Js 中debug方式
Feb 07 #Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 #Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 #Javascript
You might like
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python 错误和异常代码详解
2018/01/29 Python
python装饰器深入学习
2018/04/06 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
pytorch 预训练层的使用方法
2019/08/20 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python datetime模块使用方法小结
2020/06/18 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
冬季安全检查方案
2014/05/23 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
公司保洁员管理制度
2015/08/04 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Pandas 数据编码的十种方法
2022/04/20 Python