前端之拖动面板

最新推荐文章于 2024-05-28 16:08:14 发布

weixin_34354945

最新推荐文章于 2024-05-28 16:08:14 发布

阅读量440

点赞数

文章标签：前端 ui javascript ViewUI

原文链接：http://www.cnblogs.com/wenxianfeng/p/10348690.html

版权

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

实现代码：

 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>

转载于:https://www.cnblogs.com/wenxianfeng/p/10348690.html

weixin_34354945

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之拖动面板

实现效果：鼠标悬浮鼠标指针变化，点击拖动实现代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖动面板</title> 6 </head> 7 &...
复制链接

扫一扫