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 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
随机推荐
- MySQL连接无法解析HOST主机名
#1042 - Can't get hostname for your address 使用IP链接或域名链接都可能遇到这个问题 解决办法: my.ini 或 my.cnf 末尾添加 skip-nam ...
- Firewalld防火墙
Firewalld服务是红帽RHEL7系统中默认的防火墙管理工具,特点是拥有运行时配置与永久配置选项且能够支持动态更新以及"zone"的区域功能概念,使用图形化工具firewall ...
- angular js一探
下一代angular js. 概念:mvc:作为dataModel的$scope. 还必须导入angular的库. ng-app:告诉angular引擎从这里开始是他因该管理的内容.(引入之后,可以在 ...
- 默认conf指向位置
查看nginx 默认配置文件所在位置 >> nginx -t print --> nginx: the configuration file /etc/nginx/nginx.co ...
- winform控件跨线程委托
1. this.listBox1.BeginInvoke(new Action(() => { if (listBox1.Items.Count > 20) listBox1.Items. ...
- 一个数组分四个ul并且每个ul里边有四个li显示
<?php $a = $array; for($i=0;$i<4;$i++ ) {?> <ul class="new-hover"> <?php ...
- Java之JSP基础语法
1.JSP页面元素简介及page指令 2.JSP注释,3种不同注释 <!-- 我是HTML注释,在客户端可见 --> <%--我是JSP注释,在客户端不可见 --%> ...
- 移动端默认返回按键，使用h5+修改默认事件
hbuilder的h5+提供开发webapp的诸多便利,很多手机自带back虚拟按键,如果不修改其默认事件,点一下app就退出了,所以我这里提供一种修改这个按键默认事件事件的代码. 首先你要用hbui ...
- sublime text 设置
https://packagecontrol.io/installation#Simple 下载 php 自动补全 点击菜单栏的:Preferences: 选择:Setting-User项: 然后在大 ...
- c#委托与事件（详解）
引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...