learning-Js/L12.5..html at master · Elric-pp/learning-Js · GitHub

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
           overflow: hidden;
            position: relative;
            top:100px;
            left: 100px;
            border: 5px solid #000;
            width: 1400px;
            height: 1800px;
        }
        img{
           border: 1px solid #000;
        }
    </style>
    <script>
        var dragObject = null;
        var mouseOffset = null;

        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;

        function MousePoint(x,y){
            this.x = x;
            this.y = y;
        }

        function mousePosition(evnt){
            var x = parseInt(evnt.clientX);
            var y = parseInt(evnt.clientY);
            return new MousePoint(x,y);
        }

        function getMouseOffset(target,evnt){
            var theEvent = evnt? evnt : window.event;
            var mousePos = mousePosition(theEvent);

            var x = mousePos.x - target.offsetLeft;
            var y = mousePos.y - target.offsetTop;
            return new MousePoint(x,y);
        }

        function mouseUp(evnt){
            dragObject = null;
        }

        function mouseMove(evnt){
            if(!dragObject) return;
            var theEvent = evnt?evnt:window.event;
            var mousePos = mousePosition(theEvent)
            if(dragObject){
                dragObject.style.position = 'relative';
                dragObject.style.top = mousePos.y - mouseOffset.y + "px";
                dragObject.style.left = mousePos.x - mouseOffset.x + "px";
                return false;
            }
        }

        function makeDraggable(item){
            if(item){
                item = document.getElementById(item);
                item.onmousedown = function(theEvent){
                    dragObject = this;
                    mouseOffset = getMouseOffset(this,theEvent);
                    return false;
                }
            }
        }

        window.onload= function(){
            makeDraggable("img1");
        }
    </script>
</head>
<body>
    <div id="div1">
        <img id="img1" src="3.jpg" alt="Figure 9-1">
    </div>
</body>
</html>