源代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> <style> .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } </style> <script> $(function() { $( "#draggable" ).draggable({ snap: true }); $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); $( "#draggable4" ).draggable({ grid: [ 20, 20 ] }); $( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); }); </script> </head> <body> <div id="snaptarget" class="ui-widget-header"> <p>我是对齐目标</p> </div> <br style="clear:both"> <div id="draggable" class="draggable ui-widget-content"> <p>默认（snap: true），对齐到所有其他的 draggable 元素</p> </div> <div id="draggable2" class="draggable ui-widget-content"> <p>我只对齐到大盒子</p> </div> <div id="draggable3" class="draggable ui-widget-content"> <p>我只对齐到大盒子的外边缘</p> </div> <div id="draggable4" class="draggable ui-widget-content"> <p>我对齐到一个 20 x 20 网格</p> </div> <div id="draggable5" class="draggable ui-widget-content"> <p>我对齐到一个 80 x 80 网格</p> </div> </body> </html>
运行结果：