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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
js实现选项卡效果
Mar 07 Javascript
数组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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
简单了解django文件下载方式
2020/02/10 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
单位人事专员介绍信
2014/01/11 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
平安工地汇报材料
2014/08/19 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2015年安全月活动总结
2015/03/26 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android