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 相关文章推荐
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
JS数组的常用10种方法详解
May 08 Javascript
简单了解JavaScript作用域
Jul 31 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php读取excel文件的简单实例
2013/08/26 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
python解析xml文件实例分析
2015/05/27 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python内置加密模块用法解析
2019/11/25 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
用Python 执行cmd命令
2020/12/18 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
介绍信怎么写
2015/01/30 职场文书
教师节祝酒词
2015/08/11 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
2019各种保证书范文
2019/06/24 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android