码迷,mamicode.com
首页 > 其他好文 > 详细

前端之拖动面板

时间:2019-02-02 17:39:57      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:top   cli   ack   cursor   指针   hit   event   script   UNC   

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

实现代码:

 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>

 

前端之拖动面板

标签:top   cli   ack   cursor   指针   hit   event   script   UNC   

原文地址:https://www.cnblogs.com/wenxianfeng/p/10348690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!