jqueryui 拖动div页面布局示例---表格可拖动示例
<html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Sortable - Display as grid</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> </head> <body> <ul id="sortable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ul> </body> </html>
参考官方网站:http://jqueryui.com/sortable/#display-grid