onmousedown活用之鼠标拖动
这个布局蛮简单的就是一个div块,通过定位,固定位置
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
</style>
</head> <body>
<div id="div"> </div>
<div id="div2"></div>
</body> </html>
在js代码中需要用到onmousedown和onmouseup这一对方法来实现
而o=event||ev;event表示一般浏览器,而ev则表示ie浏览器,所以o就可以在不同的浏览器中同样实现相同效果
<script type="text/javascript">
var Div = document.getElementById("div");
Div.onmousedown = function(ev) {
var o = event || ev;
//获取到鼠标点击的位置距离div左侧和顶部边框的距离
oX = o.clientX - parseInt(getStyle(Div, "left"));
oY = o.clientY - parseInt(getStyle(Div, "top"));
//当鼠标移动，把鼠标的偏移量给div
document.onmousemove = function(ev) {
var o = event || ev;
//计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动
Div.style.left = o.clientX - oX + "px";
Div.style.top = o.clientY - oY + "px";
} //当鼠标按键抬起，清除移动事件
document.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
}
} //获取属性的数值
function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值，对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理，对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
</script>
onmousedown活用之鼠标拖动的更多相关文章
- 实现鼠标拖动canvas绘制的图片
不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- 用canvas实现鼠标拖动绘制矩形框
需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...
- 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放
上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
随机推荐
- 敏捷开发（十）- Scrum每日例会
本文主要是为了检测你对SCRUM 评估会议的了解和使用程度, 通过本文你可以检测一下 1.你们的SCRUM 没人例会的过程和步骤 2.SCRUM 每日例会的输出结果一.会议目的 ...
- 《JavaScript网页经典特效300例》
<JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇
- 四步安装typecho(LNMP环境)
##1 安装nginx,mysql,php环境 sudo apt-get install nginx php5-fpm php5-cgi php5-cli php5-curl php5-gd php5 ...
- php中函数 vsprintf() 和 var_export（）
把格式化字符串写入变量中: <?php $number = 9; $str = "Beijing"; $txt = vsprintf("There are %u m ...
- ITest
渗透测试入门 我很简单,请不要欺负我 网站综合渗透实验: 真的很简单: 你是会员吗: 2015中国网络安全大赛 一.代码执行: 同DZ漏洞全家桶中的"又见DZ,我能那你怎么办". ...
- mpich2 下运行时出现“由于目标计算机积极拒绝，无法连接”的错误
进行mpi并行编程时候,win8下使用mpich2时候,安装目录下找到wmpiexec.exe程序打开,填入编写好的.exe程序地址并制定执行的任务数目的想要运行时候,出现错误: unable to ...
- hbase 无法操作与hadoop的安全模式的原因
最近使用hbase时,运行zookeeper的机子没有正常关闭zookeeper就关机了,导致开机后整个hbase集群无法使用,表现为master的localhost:60010 无法登录,使用hba ...
- hdu 3440 House Man
差分约束系统 例如, 5 6 20 34 54 10 15 这一组测试数据 先编号,分别为1 2 3 4 5 ,然后可以写出一组表达式,两个编号之间的距离必定大于等于1的,所以i+1到i建立有向边 ...
- 第七十七节，CSS3前缀和rem长度单位
CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...
- html5--画布
简介 canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形.图标.以及其它任何视觉性图像.它也可用于创建图片特效和动画.canvas 元素本身是没有绘图能力的.所有的绘制工 ...