前端之拖动面板

实现效果:鼠标悬浮鼠标指针变化,点击拖动

实现代码:

 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>

 

posted @ 2019-02-02 16:32 飞鸟_山东 阅读(...) 评论(...) 编辑 收藏