javascript 鼠标拖动图标技术
更新时间：2010年02月07日 11:59:40 作者：
刚刚学习了个js的小技术，还蛮好玩的，以后会把做的一些小例子贴上来，方便自己也可以跟大家一起分享学习成果，哈哈~~
这个例子简单讲就是鼠标拖动图标到它任意想去的地方
代码
<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>
代码
复制代码 代码如下:
<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>
相关文章
本文章总结了利用jquery与js实现multiple全选与取消全选代码有需要参考的朋友可参考下2012-12-12
这篇文章给大家分享了JavaScript实现添加给定的标签选项的相关知识点内容以及代码实例，有兴趣的朋友们参考下。2018-09-09
下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
JavaScript遍历table表格中的某行某列并打印其值
这篇文章主要介绍了JavaScript遍历table表格中的某行某列并打印其值,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了js 金额格式化来回转换实现,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了js判断移动端是否安装某款app的多种方法，感兴趣的小伙伴们可以参考一下2015-12-12
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
这篇文章主要介绍了JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)的相关资料,需要的朋友可以参考下2016-05-05
JS断点调试,即是在浏览器开发者工具中为JS代码添加断点,让JS执行到某一特定位置停住,方便开发者对该处代码段的分析,这篇文章主要介绍了JS打断点的六种常用姿势的相关资料,需要的朋友可以参考下2025-04-04
我们在写CSS的时候，会遇到大量相同的属性(比如：margin-top:10px)这种属性几乎每个vue页面都有。这个时候，我们可以把css挂载到全局上，供所有vue页面使用，同时也方便修改。感兴趣的同学可以参考一下2023-04-04
这篇文章主要介绍了js实现键盘上下左右键选择文字并显示在文本框的方法,涉及javascript操作键盘事件及文本框的相关技巧,非常简单实用,需要的朋友可以参考下2015-05-05
最新评论