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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
数组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
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
Vue组件化开发思考
2018/02/02 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
详细分析python3的reduce函数
2017/12/05 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
详解Python文件修改的两种方式
2019/08/22 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python使用Geany编辑器配置方法
2020/02/21 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python自动登录QQ的实现示例
2020/08/28 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
军人离婚协议书样本
2014/10/21 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js