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内存泄露的几种情况详细探讨
May 31 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
js创建对象的方法汇总
Jan 07 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
JS实现多功能计算器
Oct 28 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
数组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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
asp 的 分词实现代码
2007/05/24 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jquery each()源代码
2011/02/14 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
用matplotlib画等高线图详解
2017/12/14 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
Servlet的生命周期
2013/08/25 面试题
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Javascript webpack动态import
2022/04/19 Javascript