//本来要给火狐提交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的更多相关文章

随机推荐

  1. [转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. css3高级运动keyframes

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js原生捕鱼达人（三）--完结

    先给分享下我写完的效果,github有点卡,我没有压缩代码,不过效果可以看到 https://jasonwang911.github.io/ 转载请注明'转载于Jason齐齐的博客http://www ...

  4. EasyUI中页面必须刷新才显示tree组件最新数据的BUG解决方案

    在URL地址后面加个时间戳,这样就避免从浏览器缓存里读取数据了 $("#devtree").tree({ url: '/Deviceinfo/ModelsTree.aspx?cmd ...

  5. centos6.8部署vnc服务

    VNC全称是Virtual Network Computing,属于远程控制类软件.其优点是支持跨操作系统的远程图形化控制.在日常运维工作中,由于服务器常常是放在机房,我们不可能每次需要图形界面操作就 ...

  6. jquery中$("#afui").get(0)为什么要加get(0)呢？

    jquery中$("#afui").get(0)为什么要加get(0)呢? 2015-04-13 17:46SYYZZ3 | 浏览 509 次  Jquery $("#a ...

  7. Ruby Web实时消息后台服务器推送技术---GoEasy

    越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推 ...

  8. GPS坐标换算为百度坐标

    最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...

  9. Android:30分钟弄明白Touch事件分发机制

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...

  10. Chrome 消息传递机制

    Chrome插件开发入门(二)——消息传递机制 Blog | Qiushi Chen 2014-03-31 9538 阅读 Chrome 插件 由于插件的js运行环境有区别,所以消息传递机制是一个重要 ...