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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
vue双向绑定简要分析
Mar 23 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
jquery实现有过渡效果的tab切换
Jul 17 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表单提交问题的解决方法
2011/04/12 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
jquery.validate使用详解
2016/06/02 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Django实现表单验证
2018/09/08 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
如何通过python实现全排列
2020/02/11 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
运动会入场解说词300字
2014/01/25 职场文书
暑期社会实践方案
2014/02/05 职场文书
元旦获奖感言
2014/03/08 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
初中学校军训方案
2014/05/09 职场文书
财务个人年度总结范文
2015/02/26 职场文书
办公室规章制度范本
2015/08/04 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
Vue h函数的使用详解
2022/02/18 Vue.js