LittleModel/Original-divDrag.html at master · HappyBangs/LittleModel · 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
85
86
87
<html>
    <head>
        <script type="text/javascript">
            var isDialogTitle=false;
            var diffx=0;
            var diffy=0;
            function down(e){
                if(e.target.className.indexOf('dialog-title')!=-1){
                   // alert(e.target.className.indexOf('dialog-title'));
                   draggingObj=e.target.offsetParent;
                    isDialogTitle=true;
                    diffx = event.clientX - draggingObj.offsetLeft+30;
                    diffy = event.clientY - draggingObj.offsetTop+30;
                }
            }

            function move(e){
                var dialog=document.getElementById('dlgTest');
                if(isDialogTitle){//只有点击Dialog Title的时候才能拖动
                    //alert(dialog.style.left);  e.clientX-dialog.style.left
                    dialog.style.left=(e.clientX-diffx)+'px';
                    dialog.style.top=(e.clientY-diffy)+'px';
                }
            }

            function up(e){
                isDialogTitle=false;
                diffx=0;
                diffy=0;
            }

            document.addEventListener('mousedown',down);
            document.addEventListener('mousemove',move);
            document.addEventListener('mouseup',up);
        </script>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }

            .dialog
            {
                width:250px;
                height:250px;
                position:absolute;
                background-color:#ccc;
                -webkit-box-shadow:1px 1px 3px #292929;
                -moz-box-shadow:1px 1px 3px #292929;
                box-shadow:1px 1px 3px #292929;
                margin:10px;
            }

            .dialog-title
            {
                color:#fff;
                background-color:#404040;
                font-size:12pt;
                font-weight:bold;
                padding:4px 6px;
                cursor:move;
            }

            .dialog-content
            {
                padding:4px;
            }
            #dlgTest
            {
                margin:30px 30px;
            }
        </style>
        <meta http-equiv="Content-type" content="text/html;charset=utf-8">
        <title>测试</title>
    </head>
    <body>
          <div id="dlgTest" class="dialog">
            <div class="dialog-title">Dialog</div>
            <div class="dialog-content">
                This is a draggable test.
            </div>
        </div>
    </body>
</html>