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 二分法(数组array)
Apr 24 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
JavaScript内置对象之Array的使用小结
May 12 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
四群教育工作实施方案
2014/03/26 职场文书
端午节演讲稿
2014/05/23 职场文书
班训口号大全
2014/06/18 职场文书
班级出游活动计划书
2014/08/15 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
二手车转让协议书
2015/01/29 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Golang 遍历二叉树
2022/04/19 Golang