javascript 鼠标拖动图标技术_javascript技巧

这个例子简单讲就是鼠标拖动图标到它任意想去的地方
代码

复制代码 代码如下:

<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>

时间: 2024-10-30 13:54:39

javascript 鼠标拖动图标技术_javascript技巧的相关文章

javascript实现简单的鼠标拖动效果实例_javascript技巧

本文实例讲述了javascript实现简单的鼠标拖动效果.分享给大家供大家参考.具体分析如下: 用鼠标拖动一个元素,放到网页的任意一个位置上,这是很常见的,例如很多博客模板版块位置可以自己拖动到相应位置. 下面先写一个简单的可以实现鼠标拖动的效果. 当鼠标按下的时候,记录鼠标当前位置和元素左边距离的差值. 当鼠标移动的时候,给元素的位置赋值,就是鼠标的位置,减去刚才的差值. 当鼠标放开的时候,给鼠标移动和鼠标放开赋值null,让它们不要再有任何动作. 要点一: disx = oevent.cli

javascript smipleChart 简单图标类_javascript技巧

因为编辑器会对代码有所破坏,所以提供一个在线演示http://demo.jb51.net/chengxu/smipleChart.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

浅谈Javascript鼠标和滚轮事件_javascript技巧

a)鼠标事件 鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用的导航设备,在DOM3级事件上定义了9个鼠标事件,分别为: click:当用户点击鼠标主键通常是指鼠标左键或按回车键时触发. dbclick:当用户双击鼠标主键时发生触发,这个事件并没有在DOM2级事件中定义但是却被普遍支持了,后来在DOM3级中得到了标准化. mousedown:当用户按下鼠标任意一个键都会触发,这个事件是不能够通过键盘触发的. mouseenter:当鼠标图标从元素外移动至元素边界内时触发.该事件不支持

JS拖动鼠标画出方框实现鼠标选区的方法_javascript技巧

本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作为上传头像时裁切选择图片,在头像裁切中使用广泛,鼠标在图片上拖动拉出一个方框,这个方框就代表着选区的功能,目前网页上已流行的一种操作.主要是依赖于JavaScript代码来实现. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

javascript实现行拖动的方法_javascript技巧

本文实例讲述了javascript实现行拖动的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>行拖动</title> <script> window.onload = functi

鼠标动作-鼠标功能改变,鼠标拖动图标的功能改变

问题描述 鼠标功能改变,鼠标拖动图标的功能改变 在桌面上鼠标识别了图标,指针放在图标上开始三秒不动就自动转换成拖动的动作 当拖动时我放在任何一个区域三秒不动 图标就会保留在那个区域 鼠标恢复到正常的功能 怎么来实现,用什么实现更简单容易.

JS实现简洁、全兼容的拖动层实例_javascript技巧

本文实例讲述了JS实现简洁.全兼容的拖动层.分享给大家供大家参考.具体分析如下: 这是一款最简洁的JS层拖动代码,全兼容ie.ff.opera.safari--每一种浏览器都有对应的判断和实现方法,你只需复制代码到你的网页中就可使用.水平高的朋友可以继续修改,添加更多方法,使其功能更强大. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

js仿百度登录页实现拖动窗口效果_javascript技巧

在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动:那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了:首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下.移动.松开:在这三个事件里分别计算元素鼠标的位置即可: 复制代码 /******* 拖拽原理1: 拖拽状态 = 0 鼠标在元素上按下的时候 { 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候 { 如果拖拽状态是0就什么也不做.

js实现一个可以兼容PC端和移动端的div拖动效果实例_javascript技巧

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.