jQuery实现div拖动非常简单,之前也写过一个div拖动的文章 js实现div拖动控制,相比之下用jQuery开发代码量少了很多,功能和扩展也更充实。
jQuery实现div拖动需要用到 jQuery UI中的ui.core.js 和ui.draggable.js 这两个插件,关于jQuery UI是做什么的在这里就不多说了。。。
先来看一个简单的例子吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现div拖动</title> </head> <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../../js/ui.core.js"></script> <script type="text/javascript" src="../../js/ui.draggable.js"></script> <style type="text/css"> #div1 { width: 150px; height: 150px; padding: 0.5em; border:1px; background:#060; } </style> <script type="text/javascript"> $(function(){ $("#div1").draggable(); }) </script> <body> <div style="width:1000px; height:900px; background:#666;"> <div id="div1"> <table border="1" id="table1"> <tr id="tr1"> <td>tr-td</td> </tr> </table> <h2>h2</h2> <p>p</p> </div> </div> </body> </html> |
ui.draggable.js 中的draggable()方法实现了对拖动事件的封装
当然draggable()方法有许多参数来控制拖动的效果
查看常用参数
随机文章
相关文章:







(3 votes, average: 4.00 out of 5)
使用dialog可以不?