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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
layui表格checkbox选择全选样式及功能的实例
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
php+mysqli数据库连接的两种方式
2015/01/28 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python实现文件的分割与合并
2019/08/29 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
项目专员岗位职责
2013/12/04 职场文书
医学生职业规划范文
2014/01/05 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
软件项目实施计划书
2014/05/02 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
领导干部保密承诺书
2014/08/30 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Python Django项目和应用的创建详解
2021/11/27 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS