可视区域内拖拽

最新推荐文章于 2022-10-09 17:05:13 发布

绿萝哥哥

最新推荐文章于 2022-10-09 17:05:13 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/uffgfbft/article/details/83821725

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

视频地址：http://www.imooc.com/learn/60

看最下面的例子

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>慕课网-拖拽效果</title>        <style type="text/css">            body {                padding: 0px;                margin: 0px;                font-size: 12px;                font-family: "微软雅黑";            }            .link {                text-align: right;                line-height: 20px;                margin-right: 40px;                color: red;            }            .ui-dialog {                width: 380px;                height: auto;                display: none;                position: absolute;                z-index: 9000;                top: 0px;                left: 0px;                border: 1px solid red;                background: #fff;            }            .ui-dialog a {                text-decoration: none;            }            .ui-dialog-title {                height: 48px;                line-height: 48px;                padding: 0px 20px;                color: black;                font-size: 16px;                border-bottom: 1px solid red;                background: #f5f5f5;                cursor: move;                user-select: none;            }            .ui-dialog-closebutton {                width: 16px;                height: 16px;                display: block;                position: absolute;                top: 12px;                right: 20px;                background: url(img/close_def.png) no-repeat;                cursor: pointer;            }            .ui-dialog-closebutton:hover {                background: url(img/close_hov.png);            }            .ui-dialog-content {                padding: 15px 20px;            }            .ui-dialog-pt15 {                padding-top: 15px;            }            .ui-dialog-l40 {                height: 40px;                line-height: 40px;                text-align: right;            }            .ui-dialog-input {                width: 100%;                height: 40px;                margin: 0px;                padding: 0px;                border: 1px solid red;                font-size: 16px;                color: #c1c1c1;                text-indent: 45px;                outline: none;            }            .ui-dialog-input-username {                background: url(img/input_username.png) no-repeat 2px;            }            .ui-dialog-input-password {                background: url(img/input_password.png) no-repeat 2px;            }            .ui-dialog-submit {                width: 100%;                height: 50px;                background: #3b7ae3;                border: none;                font-size: 16px;                color: #fff;                outline: none;                text-decoration: none;                display: block;                text-align: center;                line-height: 50px;            }            .ui-dialog-submit:hover {                background: #3f81b0;            }            .ui-mask {                width: 100%;                height: 100%;                background: black;                position: absolute;                top: 0px;                height: 0px;                z-index: 8000;                opacity: 0.4;            }        </style>        <script type="text/javascript">            window.onload = function() {                var dialogInstace, onMoveStartId, mousePos = {                    x: 0,                    y: 0                }; //   用于记录当前可拖拽的对象                // var zIndex = 9000;                //  获取元素对象                  function g(id) {                    return document.getElementById(id);                }                //  自动水平居中元素（el = Element）                function autoCenter(el) {                    var bodyW = document.documentElement.clientWidth;                    var bodyH = document.documentElement.clientHeight;                    var elW = el.offsetWidth;                    var elH = el.offsetHeight;                    el.style.left = (bodyW - elW) / 2 + 'px';                    el.style.top = (bodyH - elH) / 2 + 'px';                }                //  自动扩展元素到全部显示区域                function fillToBody(el) {                    el.style.width = document.documentElement.clientWidth + 'px';                    el.style.height = document.documentElement.clientHeight + 'px';                }                //  Dialog实例化的方法                function Dialog(dragId, moveId) {                    var instace = {};                    instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素                    instace.moveElement = g(moveId); // 拖拽操作时，移动的元素                    instace.mouseOffsetLeft = 0; // 拖拽操作时，移动元素的起始 X 点                    instace.mouseOffsetTop = 0; //  拖拽操作时，移动元素的起始 Y 点                    instace.dragElement.addEventListener('mousedown', function(e) {                        var e = e || window.event;                        dialogInstace = instace;                        instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;                        instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;                        onMoveStartId = setInterval(onMoveStart, 10);                        return false;                        // instace.moveElement.style.zIndex = zIndex ++;                    })                    return instace;                }                //  在页面中侦听 鼠标弹起事件                document.onmouseup = function(e) {                    dialogInstace = false;                    clearInterval(onMoveStartId);                }                document.onmousemove = function(e) {                    var e = window.event || e;                    mousePos.x = e.clientX;                    mousePos.y = e.clientY;                    e.stopPropagation && e.stopPropagation();                    e.cancelBubble = true;                    e = this.originalEvent;                    e && (e.preventDefault ? e.preventDefault() : e.returnValue = false);                    document.body.style.MozUserSelect = 'none';                }                function onMoveStart() {                    var instace = dialogInstace;                    if(instace) {                        var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;                        var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;                        instace.moveElement.style.left = Math.min(Math.max((mousePos.x - instace.mouseOffsetLeft), 0), maxX) + "px";                        instace.moveElement.style.top = Math.min(Math.max((mousePos.y - instace.mouseOffsetTop), 0), maxY) + "px";                    }                }                //  重新调整对话框的位置和遮罩，并且展现                function showDialog() {                    g('dialogMove').style.display = 'block';                    g('mask').style.display = 'block';                    autoCenter(g('dialogMove'));                    fillToBody(g('mask'));                }                //  关闭对话框                function hideDialog() {                    g('dialogMove').style.display = 'none';                    g('mask').style.display = 'none';                }                //  侦听浏览器窗口大小变化                window.onresize = showDialog;                Dialog('dialogDrag', 'dialogMove');                showDialog();            }        </script>    </head>    <body>        <div class="link">            <a href="javascript:showDialog();">登录</a>        </div>        <div class="ui-mask" id="mask" onselectstart="return false"></div>        <!--遮罩-->        <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>            <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">                登录通行证                <a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>            </div>            <div class="ui-dialog-content">                <div class="ui-dialog-l40 ui-dialog-pt15">                    <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />                </div>                <div class="ui-dialog-l40 ui-dialog-pt15">                    <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />                </div>                <div class="ui-dialog-l40">                    <a href="#">忘记密码</a>                </div>                <div>                    <a class="ui-dialog-submit" href="#">登录</a>                </div>                <div class="ui-dialog-l40">                    <a href="#">立即注册</a>                </div>            </div>        </div>    </body></html>
  
  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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253

修改：

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8" />        <title>Document</title>        <style type="text/css">            * {                padding: 0px;                margin: 0px;            }            #mask {                width: 100%;                height: 100%;                background: black;                position: absolute;                top: 0px;                height: 0px;                z-index: 1;                opacity: 0.4;            }            #box {                z-index: 11;                display: none;                position: absolute;                width: 300px;                height: 300px;                background: red;            }            #main {                height: 50px;                background: blue;                cursor: move;            }        </style>        <script type="text/javascript">            window.onload = function() {                var dialogInstace, onMoveStartId, mousePos = {                    x: 0,                    y: 0                }; //   用于记录当前可拖拽的对象                // var zIndex = 9000;                //  获取元素对象                  function g(id) {                    return document.getElementById(id);                }                //  自动水平居中元素（el = Element）                function autoCenter(el) {                    var bodyW = document.documentElement.clientWidth;                    var bodyH = document.documentElement.clientHeight;                    var elW = el.offsetWidth;                    var elH = el.offsetHeight;                    el.style.left = (bodyW - elW) / 2 + 'px';                    el.style.top = (bodyH - elH) / 2 + 'px';                }                //  自动扩展元素到全部显示区域                function fillToBody(el) {                    el.style.width = document.documentElement.clientWidth + 'px';                    el.style.height = document.documentElement.clientHeight + 'px';                }                //  Dialog实例化的方法                function Dialog(dragId, moveId) {                    var instace = {};                    instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素                    instace.moveElement = g(moveId); // 拖拽操作时，移动的元素                    instace.mouseOffsetLeft = 0; // 拖拽操作时，移动元素的起始 X 点                    instace.mouseOffsetTop = 0; //  拖拽操作时，移动元素的起始 Y 点                    instace.dragElement.addEventListener('mousedown', function(e) {                        var e = e || window.event;                        dialogInstace = instace;                        instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;                        instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;                        onMoveStartId = setInterval(onMoveStart, 10);                        return false;                        // instace.moveElement.style.zIndex = zIndex ++;                    })                    return instace;                }                //  在页面中侦听 鼠标弹起事件                document.onmouseup = function(e) {                    dialogInstace = false;                    clearInterval(onMoveStartId);                }                document.onmousemove = function(e) {                    var e = window.event || e;                    mousePos.x = e.clientX;                    mousePos.y = e.clientY;                    e.stopPropagation && e.stopPropagation();                    e.cancelBubble = true;                    e = this.originalEvent;                    e && (e.preventDefault ? e.preventDefault() : e.returnValue = false);                    document.body.style.MozUserSelect = 'none';                }                function onMoveStart() {                    var instace = dialogInstace;                    if(instace) {                        var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;                        var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;                        instace.moveElement.style.left = Math.min(Math.max((mousePos.x - instace.mouseOffsetLeft), 0), maxX) + "px";                        instace.moveElement.style.top = Math.min(Math.max((mousePos.y - instace.mouseOffsetTop), 0), maxY) + "px";                    }                }                //  关闭对话框                function hideDialog() {                    g('dialogMove').style.display = 'none';                    g('mask').style.display = 'none';                }                //  重新调整对话框的位置和遮罩，并且展现                function showDialog() {                    g('box').style.display = 'block';                    g('mask').style.display = 'block';                    autoCenter(g('box'));                    fillToBody(g('mask'));                }                //  侦听浏览器窗口大小变化                window.onresize = showDialog;                Dialog('main', 'box');                showDialog();            }        </script>    </head>    <body>        <div id="mask"></div>        <!--遮罩 -->        <div id="box">            <div id="main">            </div>        </div>    </body></html>
  
  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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137