案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <style>
11
  .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
12
  .ui-widget-header p, .ui-widget-content p { margin: 0; }
13
  #snaptarget { height: 140px; }
14
  </style>
15
  <script>
16
  $(function() {
17
    $( "#draggable" ).draggable({ snap: true });
18
    $( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
19
    $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
20
    $( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
21
    $( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
22
  });
23
  </script>
24
</head>
25
<body>
26
27
<div id="snaptarget" class="ui-widget-header">
28
  <p>我是对齐目标</p>
29
</div>
30
31
<br style="clear:both">
32
33
<div id="draggable" class="draggable ui-widget-content">
34
  <p>默认（snap: true），对齐到所有其他的 draggable 元素</p>
35
</div>
36
37
<div id="draggable2" class="draggable ui-widget-content">
38
  <p>我只对齐到大盒子</p>
39
</div>
40
41
<div id="draggable3" class="draggable ui-widget-content">
42
  <p>我只对齐到大盒子的外边缘</p>
43
</div>
44
45
<div id="draggable4" class="draggable ui-widget-content">
46
  <p>我对齐到一个 20 x 20 网格</p>
47
</div>
48