前端之拖动面板
程序员文章站
2022-05-15 21:06:49
实现效果：鼠标悬浮鼠标指针变化，点击拖动 实现代码： ......
实现效果：鼠标悬浮鼠标指针变化，点击拖动
实现代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>拖动面板</title>
6 </head>
7 <body>
8 <div style="border: 1px solid red;width: 600px;position: absolute">
9 <div class="title" style="height: 40px;background-color: black;color: white;">标题</div>
10 <div style="height: 300px;">内容</div>
11 </div>
12 <div>444</div>
13 <script src="jquery-1.8.2.js"></script>
14 <script>
15 $(function () {
16 $('.title').mouseover(function () {
17 $(this).css('cursor','move').mousedown(function (e) {
18 var _event = e || window.event;
19 var old_x = _event.clientx;
20 var old_y = _event.clienty;
21
22 var parent_top = $(this).parent().offset().top;
23 var parent_left = $(this).parent().offset().left;
24
25 $(this).bind('mousemove',function (e) {
26 var _new_event = e || window.event;
27 var new_y = _new_event.clienty;
28 var new_x = _new_event.clientx;
29
30 var x = parent_left + (new_x - old_x);
31 var y = parent_top + ( new_y- old_y);
32
33 $(this).parent().css('left',x+'px');
34 $(this).parent().css('top',y+'px');
35 })
36 }).mouseup(function () {
37 $(this).unbind('mousemove');
38 })
39 });
40 });
41 </script>
42 </body>
43 </html>
上一篇： 冬季护肤要保湿 正确手法让肌肤喝饱水
下一篇： 爱情之路，禁止通行！