前端之拖动面板
Posted wenxianfeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之拖动面板相关的知识，希望对你有一定的参考价值。
实现效果：鼠标悬浮鼠标指针变化，点击拖动
实现代码：
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>
以上是关于前端之拖动面板的主要内容，如果未能解决你的问题，请参考以下文章