欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端之拖动面板

程序员文章站 2022-09-22 08:58:07
实现效果:鼠标悬浮鼠标指针变化,点击拖动 实现代码: ......

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

实现代码:

 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>