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之文件操作
Mar 07 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 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连接SQLServer2005方法及代码
2013/12/26 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
[原创]图片分页查看
2006/08/28 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
js简易版购物车功能
2017/06/17 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
js实现随机点名功能
2020/12/23 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
python机器学习之神经网络(一)
2017/12/20 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
什么是View State?
2013/01/27 面试题
2014年节能减排工作总结
2014/12/06 职场文书
二审代理词范文
2015/05/25 职场文书
人力资源部工作计划
2019/05/14 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
win10下go mod配置方式
2021/04/25 Golang
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL