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 $.each的用法说明
Mar 22 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
javascript常用功能汇总
2015/07/05 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python中断多重循环的思路总结
2019/10/04 Python
python微信公众号开发简单流程实现
2020/03/09 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
《威尼斯的小艇》教学反思
2014/02/17 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
整改报告格式
2014/11/06 职场文书
旷工检讨书1000字
2015/01/01 职场文书
单位租车协议书
2015/01/29 职场文书
感恩教育观后感
2015/06/17 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书