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调用XML制作连动下拉列表框
Jun 25 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
js实现div在页面拖动效果
May 04 Javascript
jQuery手风琴的简单制作
May 12 jQuery
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
小程序如何写动态标签的实现方法
Feb 05 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&amp;MYSQL留言板源码
2020/07/19 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
thinkPHP查询方式小结
2016/01/09 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
SQL SERVER面试资料
2013/03/30 面试题
如何写出好的Java代码
2014/04/25 面试题
电脑教师的自我评价
2013/12/18 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
学术诚信承诺书
2014/05/26 职场文书
购房个人委托书范本
2014/10/11 职场文书
服务器间如何实现文件共享
2022/05/20 Servers