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 相关文章推荐
广告显示判断
Aug 31 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
一个可复用的vue分页组件
May 15 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 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
网站当前的在线人数
2006/10/09 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php xhprof使用实例详解
2019/04/15 PHP
js控制的遮罩层实例介绍
2013/05/29 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
创建Django项目图文实例详解
2019/06/06 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python高级特性简介
2020/08/13 Python
Java工程师面试集锦之Spring框架
2013/06/16 面试题
日本语毕业生自荐信
2014/02/01 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
小学校长开学致辞
2015/07/29 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
Python+Appium自动化测试的实战
2021/06/30 Python
Python实现简单得递归下降Parser
2022/05/02 Python
python获取带有返回值的多线程
2022/05/02 Python