bugzilla_firefox

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
//本来要给火狐提交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>

　　

本文作者：方方和圆圆

本文链接：https://www.cnblogs.com/diligenceday/p/3580323.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(338)  评论(0)  编辑  收藏  举报

再过一百年， 我会在哪里？

💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
点击右上角即可分享
微信分享提示
AI IDE Trae