<title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title>
<link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
<script src="/js/jqu/jquery.min1.10.2.js"></script>
<script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
.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; } $( "#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 ] });