bugzilla_firefox
//本来要给火狐提交bug的，发现复现不鸟，我勒个去
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
html,body{
width:100%;
height:100%;
}
body{
position:relative
}
section{
position:absolute
}
.s1{
left:10px;
}
.s2{
left:40px;
}
.s3{
left:80px
}
input{
display:none;
outline:none
}
</style>
<body>
<section class="s1">
11
</section>
<section class="s2">
11
</section>
<section class="s3">
11
</section>
<input type="text">
<script>
var Drag = function( e ){
this.e = typeof e === "string" ? document.getElementById(e) : e;
this.initDrag();
}
Drag.prototype = {
zIndex : 0,
constructor : Drag,
initDrag : function(){
this.e.addEventListener("mousedown",this.ev.bind(this));
},
ev : function(e){
switch(e.type){
case "mousedown":
this.dx = e.clientX - this.e.offsetLeft;
this.dy = e.clientY - this.e.offsetTop;
this.e.zIndex = this.zIndex++;
this.fn = this.ev.bind(this);
document.addEventListener("mousemove",this.fn);
document.addEventListener("mouseup",this.fn);
break;
case "mousemove":
this.e.style.left = e.clientX - this.dx + "px";
this.e.style.top = e.clientY - this.dy + "px";
break;
case "mouseup":
document.removeEventListener("mouseup",this.fn)
document.removeEventListener("mousemove",this.fn)
break;
};
e.cancelBubble = true;
e.defaultPrevented = true;
e.stopPropagation();
e.preventDefault();
return
}
};
Array.prototype.slice.call(document.querySelectorAll("section"),null).forEach(function(e,i){
new Drag(e);
e.addEventListener("mouseup",function(){
var css = Object.create( window.getComputedStyle(e,null) ),
t = parseInt(css.top) + "px",
l = parseInt(css.left) + "px";
/************************************/
e.style.left = 0;
e.style.top = 0;
/************************************/
console.log( window.getComputedStyle(e,null).left )
console.log( window.getComputedStyle(e,null).top )
e.style.left = l
e.style.top = t
});
});
</script>
</body>
</html>
bugzilla_firefox的更多相关文章
随机推荐
- 随机序列生成算法---生成前N个整数的一组随机序列
问题描述: 给定输入N,生成从1开始的:1,2,3,4,......N 一组随机序列,序列中的数不能重复出现. 比如:N=5,合法的随机序列为{4,3,1,5,2} .{3,1,4,2,5}……非法的 ...
- disabled和readonly的区别？
在博客园中看到这样一篇文章,关于disabled和readonly的区别,以前还真的没有注意它们的区别,还是有必要知道它们的区别的,所以转载了. 这两个属性有类似之处,但是区别也是巨大的,之所以说类似 ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- JS实现图片上传预览效果：方法一
<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...
- Linux命令学习－top
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法. top - 01:06:48 up 1:22, ...
- java 13-1 数组高级二分查找
查找: 1.基本查找:数组元素无序(从头找到尾) 2.二分查找(折半查找):数组元素有序 pS:数组的元素必须有顺序,从小到大或者从大到小.以下的分析是从小到大的数组 二分查找分析: A:先对数组进行 ...
- Javascript 中的 in, hasOwnProperty, delete, for/in
in 运算符 判断对象是否拥有某一属性只要对象拥有该属性,就会返回true,否则false var point = { x:1, y:1 };alert( 'x' in point ); //tru ...
- f2fs解析（七）node管理器中的 free_nid 结构体
除了node_info之外, node管理器中还有还有个重要的数据结构: struct free_nid { struct list_head list; /* for free node id li ...
- Elasticsearch集群中处理大型日志流的几个常用概念
之前对于CDN的日志处理模型是从logstash agent==>>redis==>>logstash index==>>elasticsearch==>&g ...
- AD域的安装
AD域的安装 初始化设置,改计算机名字dcserver,改静态ip,改dns指向自己. dcpromo,执行后自动装了dns. 装完后检查 1,本地用户没了 2,dns指向自己 3,dns记录是否 ...