* update document files.

docs/index.json

@@ -290,6 +290,14 @@
                     "name": "界面元素的命名"
                 }],
                 "filter": "yueding yd"
+            }, {
+                "desc": "下载并使用ZUI",
+                "icon": "icon-download",
+                "id": "download",
+                "name": "下载与使用",
+                "version": "1.5.0",
+                "topics": [],
+                "filter": "xiazai xz shiyong sy"
             }, {
                 "icon": "icon-smile",
                 "id": "hello",
@@ -865,16 +873,13 @@
                 "icon": "icon-chat",
                 "desc": "为元素额外提供消息文本",
                 "name": "提示消息",
+                "update": "1.5.0",
                 "topics": [{
-                    "name": "一般工具提示"
+                    "name": "示例"
                 }, {
                     "name": "不同方向的提示"
-                }, {
-                    "name": "Markup"
                 }, {
                     "name": "选项"
-                }, {
-                    "name": "标记"
                 }, {
                     "name": "方法"
                 }, {
@@ -977,7 +982,13 @@
                 "desc": "拖动并放置在目标位置",
                 "name": "拖放",
                 "update": "1.5.0",
-                "topics": [],
+                "topics": [{
+                    "name": "综合示例"
+                }, {
+                    "name": "选项"
+                }, {
+                    "name": "处理拖放过程"
+                }],
                 "filter": "tuofang tf"
             }, {
                 "id": "sortable",
@@ -985,7 +996,13 @@
                 "desc": "拖动元素来排列顺序",
                 "name": "拖放排序",
                 "version": "1.5.0",
-                "topics": [],
+                "topics": [{
+                    "name": "综合示例"
+                }, {
+                    "name": "选项"
+                }, {
+                    "name": "处理拖放排序过程"
+                }],
                 "filter": "tuofangpaixu tfpx"
             }, {
                 "id": "selectable",
@@ -1097,6 +1114,7 @@
                 "icon": "icon-layout",
                 "desc": "用于用户提交数据的视图",
                 "name": "表单",
+                "update": "1.5.0",
                 "topics": [{
                     "name": "基本形式"
                 }, {
@@ -1177,7 +1195,16 @@
                 "icon": "icon-columns",
                 "desc": "在多个列进行拖放内容",
                 "name": "看板",
-                "topics": [],
+                "update": "1.5.0",
+                "topics": [{
+                    "name": "综合示例"
+                }, {
+                    "name": "HTML 结构"
+                }, {
+                    "name": "选项"
+                }, {
+                    "name": "处理看板交互过程"
+                }],
                 "filter": "kanban kb"
             }, {
                 "id": "dashboard",

docs/part/component-listgroup.md

@@ -37,6 +37,8 @@ filter: liebiaozu lbz
 
 ## 链接
 
+直接为 `<a>` 添加 `.list-group-item` 类。
+
 <div class="example">
   <div class="list-group">
     <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击</a>

docs/part/javascript-droppable.md

@@ -280,7 +280,7 @@ $('#droppableBtn').droppable(options)
 4. `beforeDrop`，在此回调函数返回 `false`，可以取消 `drop` 的调用；
 5. `drop`
 6. `finish`
-7. 'always'
+7. `always`
 
 当点击了鼠标但没有移动鼠标进行拖动，则只有 `before` 和 `always` 回调函数被调用。
 

docs/part/javascript-sortable.md

+section: javascript
+id: sortable
+description: 拖动并排序一组元素
+icon: icon-sort
+filter: tuofangpaixu tfpx
+---
+
+# 拖放排序
+
+拖放排序可以允许用户在目标容器内拖动子元素来排序这些子元素。
+
+拖动时会在文档中插入被拖动元素的**影子元素**，会跟随鼠标光标位置，用于指示当前拖动的位置。
+
+## 综合示例
+
+下面的例子中可以通过拖放来重新排序列表组中的项目。
+
+<example>
+  <div class="list-group" id="sortableList">
+    <div class="list-group-item"><i class="icon-move"></i> 猫咪</div>
+    <div class="list-group-item"><i class="icon-move"></i> 小鸡</div>
+    <div class="list-group-item"><i class="icon-move"></i> 大黄</div>
+    <div class="list-group-item"><i class="icon-move"></i> 鹅鹅鹅</div>
+    <div class="list-group-item"><i class="icon-move"></i> 猪王</div>
+  </div>
+</example>
+
+<style>
+#sortableList > .list-group-item {cursor: move}
+#sortableList > .list-group-item.dragging {
+  visibility: visible;
+  opacity: .3;
+}
+</style>
+
+<script>
+$(function() {
+    $('#sortableList').sortable();
+});
+</script>
+
+```html
+<div class="list-group" id="sortableList">
+  <div class="list-group-item"><i class="icon-move"></i> 猫咪</div>
+  <div class="list-group-item"><i class="icon-move"></i> 小鸡</div>
+  <div class="list-group-item"><i class="icon-move"></i> 大黄</div>
+  <div class="list-group-item"><i class="icon-move"></i> 鹅鹅鹅</div>
+  <div class="list-group-item"><i class="icon-move"></i> 猪王</div>
+</div>
+```
+
+```css
+/* 为可拖动的条目应用可移动光标类型 */
+#sortableList > .list-group-item {cursor: move}
+
+/* 为正在被拖动的条目应用半透明外观 */
+#sortableList > .list-group-item.dragging {
+  visibility: visible;
+  opacity: .3;
+}
+```
+
+```javascript
+$('#sortableList').sortable();
+```
+
+## 选项
+
+在进行初始化时允许传入一个对象参数作为初始化选项。可以使用的选项如下：
+
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>选项</th>
+      <th>名称</th>
+      <th>可选值</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`selector`</td>
+      <td>可拖动元素选择器</td>
+      <td>默认 `'div,li'`</td>
+      <td>使用 jQuery 选择器来指定容器内的哪些元素可以被拖动排序。</td>
+    </tr>
+    <tr>
+      <td>`dragCssClass`</td>
+      <td>用于被拖动元素的类</td>
+      <td>默认 `'invisible'`</td>
+      <td>当一个元素正在被拖动时，该选项设置的类会被添加到原元素上。</td>
+    </tr>
+    <tr>
+      <td>`start`</td>
+      <td>拖动前回调函数</td>
+      <td>默认不设置</td>
+      <td>指定一个回调函数在拖动发生前（`mousedown` 事件发生时）调用。</td>
+    </tr>
+    <tr>
+      <td>`order`</td>
+      <td>顺序发生变化的回调函数</td>
+      <td>默认不设置</td>
+      <td>指定一个回调函数在拖动元素过程中子元素顺序发生变化时调用。</td>
+    </tr>
+    <tr>
+      <td>`finish`</td>
+      <td>拖动完成回调函数</td>
+      <td>默认不设置</td>
+      <td>指定一个回调函数在拖动完成后（`mouseup` 事件发生时）调用。</td>
+    </tr>
+  </tbody>
+</table>
+
+使用选项：
+
+```javascript
+// 定义选项对象
+var options = {
+    selector: '.sortable-item',
+    finish: function(e) {
+        console.log('排序完成：', e);
+    },
+    // 设置更多选项...
+};
+
+// 初始化时传入选项参数
+$('#sortableList').sortable(options)
+```
+
+
+## 处理拖放排序过程
+
+通过选项设置 `start`、`order`、`finish` 的回调函数来处理整个拖动过程，并实时获取拖动的位置。
+
+### <span class="code">start(e)</span>
+
+`start(e)` 回调函数在拖动发生之前调用，用于处理拖动前的操作。
+
+### <span class="code">order(e)</span>
+
+`order(e)` 回调函数在拖动时且子元素发生顺序变化时被调用，该回调函数参数 `e` 包含的属性定义如下：
+
+ - `e.list`：已当前顺序返回所有可拖动元素；
+ - `e.element`：当前正在被拖动的元素。
+
+### <span class="code">finish(e)</span>
+
+`finish(e)` 拖动完成时被调用。该回调函数参数 `e` 拥有 `order` 回调函数参数的所有属性。

docs/part/javascript-tooltip.md

@@ -7,204 +7,191 @@ filter: tishixiaoxi tsxx
 
 # 提示消息
 
-## 一般工具提示
+提示消息又称“工具提示”，在用户鼠标悬停在元素上时及时显示额外的内容。
 
-<div class="example tooltip-demo">
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore,
-  cupiditate, eius, modi, veniam iure perspiciatis hic vitae quisquam ullam
-  animi ipsum repellat temporibus <a href="#" data-toggle="tooltip" title="This is a tooltip">have a</a> officiis voluptatibus nostrum laborum debitis
-  quidem illo deleniti iste! Minima, facilis aut explicabo debitis fugit dolor
-  sint at soluta nulla omnis itaque <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> illum commodi numquam enim quod architecto
-  molestias qui eveniet et amet <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> laborum quisquam quam provident esse beatae quas
-  impedit voluptas nostrum <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> aspernatur deleniti suscipit blanditiis
-  dignissimos temporibus eligendi quae corrupti <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> pariatur quo! Enim, ipsa, odio
-  quasi laboriosam provident id nihil maxime architecto dolorum quas harum
-  veniam perspiciatis tempora ducimus qui! Rem, obcaecati reiciendis officia
-  quam.</p>
-</div>
-
-## 不同方向的提示
+## 示例
 
-<div class="example tooltip-demo">
-  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">左侧Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">上方Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">下方Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">右侧Tooltip</button>
-</div>
+下面示例中的每个链接都有提示消息，将鼠标移到链接上可以查看提示消息。
 
-## 使用提醒
+<example class="tooltip-demo">
+  <p><a href="#" data-toggle="tooltip" title="英语：Cascading Style Sheets，简写CSS">层叠样式表</a>，又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为<a href="#" data-toggle="tooltip" title="如HTML文档或XML应用">结构化文档</a>添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发过程中。（摘自<a href="https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8" data-toggle="tooltip" title="访问“层叠样式表”词条" target="_blank">维基百科</a>）</p>
+</example>
 
-*   选择性加入的功能：出于性能方面的考虑，工具提示和弹框组件的data属性api是选择性加入的，也就是说 **你必须自己初始化他们**。
-*   工具提示与按钮组和输入框组联合使用时需要一些特殊设置：在 `.btn-group` 或 `.input-group` 内的元素上使用工具提示时，你需要指定 `container: 'body'`选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。
-*   在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来：为了给 `disabled` 或 `.disabled` 元素添加工具提示，将需要增加工具提示的页面元素包裹在一个 `<div>` 中，然后对这个 `<div>` 元素应用工具提示。
+```html
+<a href="#" data-toggle="tooltip" title="英语：Cascading Style Sheets，简写CSS">层叠样式表</a>
+```
 
-## 用法
+```javascript
+// 你需要手动初始化工具提示
+$('[data-toggle="tooltip"]').tooltip();
+```
 
-通过JavaScript激活工具提示：
+为需要显示工具提示的元素添加 `[data-toggle="tooltip"]` 属性，并调用工具提示初始化方法即可。默认情况下元素的 `[title]` 属性值即为工具提示显示的内容。
 
-<div class="example">
-  鼠标悬停显示<a href="###" data-toggle="tooltip" title="这是提示消息内容">提示消息</a>
+<div class="alert alert-warning">
+  <h4>提示</h4>
+  <p>提示消息与按钮组和输入框组联合使用时需要一些特殊设置：在 .btn-group 或 .input-group 内的元素上使用提示消息时，你需要指定 container: 'body'选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。</p>
 </div>
 
-```
-<a href="your/nice/url" data-toggle="tooltip" title="这是提示消息内容">鼠标悬停显示提示消息</a>
-```
 
-```
-<code class="language-js">$(<span class="string">'[data-toggle="tooltip"]'</span>).tooltip(options);</code>
-```
-
-## 选项
+## 不同方向的提示
 
-可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到 `data-` 之后，例如 `data-animation=""` 。
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 100px;">名称</th>
-        <th style="width: 100px;">类型</th>
-        <th style="width: 50px;">默认值</th>
-        <th>描述</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>animation</td>
-        <td>boolean</td>
-        <td>true</td>
-        <td>决定是否应用淡入淡出动画。</td>
-      </tr>
-      <tr>
-        <td>html</td>
-        <td>boolean</td>
-        <td>false</td>
-        <td>是否允许展示html标签。</td>
-      </tr>
-      <tr>
-        <td>placement</td>
-        <td>string | function</td>
-        <td>'top'</td>
-        <td>top | bottom | left | right | auto.
-        <br>
-        显示的位置。</td>
-      </tr>
-      <tr>
-        <td>selector</td>
-        <td>string</td>
-        <td>false</td>
-        <td>当需要为动态DOM应用工具提示，需要手动指定选择器。</td>
-      </tr>
-      <tr>
-        <td>title</td>
-        <td>string | function</td>
-        <td>''</td>
-        <td>标题。</td>
-      </tr>
-      <tr>
-        <td>trigger</td>
-        <td>string</td>
-        <td>'hover focus'</td>
-        <td>click | hover | focus | manual. 触发方式。</td>
-      </tr>
-      <tr>
-        <td>delay</td>
-        <td>number | object</td>
-        <td>0</td>
-        <td>
-          <p>如果指定，则应用延迟。</p>
-          <p><code>delay: { show: 500, hide: 100 }</code></p>
-        </td>
-      </tr>
-      <tr>
-        <td>container</td>
-        <td>string | false</td>
-        <td>false</td>
-        <td>
-          <p>决定相对位置的父级容器。 <code>container: 'body'</code></p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+<div class="example tooltip-demo">
+  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="左侧提示内容">左侧提示</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="上方提示内容">上方提示</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="下方提示内容">下方提示</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="右侧提示内容">右侧提示</button>
 </div>
 
-使用data属性可以为单个工具提示指定额外选项，如下所示。
+使用 `placement` 选项来指定工具提示相对于元素显示的位置。
 
-## 标记
+## 选项
 
-<div class="example">
-  <pre><code class="language-html">&lt;a href="#" data-toggle="tooltip" title="first tooltip"&gt;Hover over me&lt;/a&gt;</code></pre>
-</div>
+可以将选项通过 `[data-*]` 属性或 JavaScript 对象指定。
+
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th style="width: 100px;">名称</th>
+      <th style="width: 100px;">类型</th>
+      <th style="width: 50px;">默认值</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`animation`</td>
+      <td>布尔值</td>
+      <td>`true`</td>
+      <td>决定是否应用淡入淡出动画。</td>
+    </tr>
+    <tr>
+      <td>`container`</td>
+      <td>字符串 | `false`</td>
+      <td>`false`</td>
+      <td>
+        <p>决定相对位置的父级容器，例如：`container: 'body'`</p>
+      </td>
+    </tr>
+    <tr>
+      <td>`delay`</td>
+      <td>数字 | 对象</td>
+      <td>`0`</td>
+      <td>
+        <p>如果指定为数字，则在指定数值的毫秒数后再显示。</p>
+        <p>如果指定为对象，则可以分别为显示或隐藏之前延迟的数值，例如：`delay: { show: 500, hide: 100 }`</p>
+      </td>
+    </tr>
+    <tr>
+      <td>`html`</td>
+      <td>布尔值</td>
+      <td>`false`</td>
+      <td>是否允许消息内容包含 HTML 格式源码。如果设置为 `false`，则仅仅使用 jQuery 的 `text()` 方法来设置消息内容。</td>
+    </tr>
+    <tr>
+      <td>`placement`</td>
+      <td>字符串 | 函数</td>
+      <td>`'top'`</td>
+      <td>指定消息显示的位置，可选值有：`'top'`, `'bottom'`, `'left'`, `'right'`, `'auto'`。如果设置为 `'auto'`，则会自动决定位置。也可以指定为一个函数，来动态返回应该显示的位置。</td>
+    </tr>
+    <tr>
+      <td>`selector`</td>
+      <td>字符串 | `false`</td>
+      <td>`false`</td>
+      <td>如果指定了该选项，则会在代理元素来触发显示工具提示，这样可以对于一些动态内容展示工具提示。</td>
+    </tr>
+    <tr>
+      <td>`template`</td>
+      <td>字符串</td>
+      <td>`'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`</td>
+      <td>HTML 模板字符串用来创建工具提示显示内容元素。要求顶级元素必须有 `.tooltip` 类，工具提示的内容会设置为 `.tooltip-inner` 的内容，`.tooltip-arrow` 将作为箭头元素。</td>
+    </tr>
+    <tr>
+      <td>`title`</td>
+      <td>字符串 | 函数</td>
+      <td>`''`</td>
+      <td>设定提示消息内容，如果为函数，可以动态返回用于提示消息内容文本。</td>
+    </tr>
+    <tr>
+      <td>`trigger`</td>
+      <td>字符串</td>
+      <td>`'hover focus'`</td>
+      <td>指定哪些事件会触发显示提示消息，多个事件用空格隔开，可选值包括：`'click'`、`'hover'`、`'focus'`、`'manual'`。</td>
+    </tr>
+  </tbody>
+</table>
 
 ## 方法
 
-### $().tooltip(options)
+### <span class="code">$().tooltip(options)</span>
 
 为一组元素应用工具提示。
 
-### .tooltip('show')
+### <span class="code">.tooltip('show')</span>
 
 展示工具提示。
 
-<div class="example">
-  <pre><code>$('#element').tooltip('show');</code></pre>
-</div>
+```javascript
+$('#element').tooltip('show');
+```
 
-### .tooltip('hide')
+### <span class="code">.tooltip('hide')</span>
 
 隐藏工具提示。
 
-<div class="example">
-  <pre><code>$('#element').tooltip('hide');</code></pre>
-</div>
+```javascript
+$('#element').tooltip('hide');
+```
 
-### .tooltip('toggle')
+### <span class="code">.tooltip('toggle')</span>
 
 展示或隐藏工具提示。
 
-<div class="example">
-  <pre><code>$('#element').tooltip('toggle');</code></pre>
-</div>
+```javascript
+$('#element').tooltip('toggle');
+```
 
-### .tooltip('destroy')
+### <span class="code">.tooltip('destroy')</span>
 
 隐藏并销毁工具提示。
 
-<div class="example">
-  <pre><code>$('#element').tooltip('destroy');</code></pre>
-</div>
+```javascript
+$('#element').tooltip('destroy');
+```
 
 ## 事件
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 150px;">事件类型</th>
-        <th>描述</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.zui.tooltip</td>
-        <td>当 <code>show</code> 方法被调用之后，此事件将被立即触发。</td>
-      </tr>
-      <tr>
-        <td>shown.zui.tooltip</td>
-        <td>当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
-      </tr>
-      <tr>
-        <td>hide.zui.tooltip</td>
-        <td>当 <code>hide</code> 方法被调用之后，此事件被触发。</td>
-      </tr>
-      <tr>
-        <td>hidden.zui.tooltip</td>
-        <td>当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<div class="example">
-  <pre><code class="language-js"></code></pre>
-</div>
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th style="width: 150px;">事件类型</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`show.zui.tooltip`</td>
+      <td>当 <code>show</code> 方法被调用之后，此事件将被立即触发。</td>
+    </tr>
+    <tr>
+      <td>`shown.zui.tooltip`</td>
+      <td>当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
+    </tr>
+    <tr>
+      <td>`hide.zui.tooltip`</td>
+      <td>当 <code>hide</code> 方法被调用之后，此事件被触发。</td>
+    </tr>
+    <tr>
+      <td>`hidden.zui.tooltip`</td>
+      <td>当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
+    </tr>
+  </tbody>
+</table>
+
+使用 jQuery `on()` 方法来绑定事件。
+
+```javascript
+$('[data-toggle="tooltip"]').on('show.zui.tooltip', function() {
+    // 处理工具提示显示时的事件
+});
+```
 
 <script>
 function afterPageLoad() {

docs/part/view-board.md

@@ -7,75 +7,55 @@ filter: kanban kb
 
 # 看板
 
-<style>
-.board-item.drag-shadow {z-index: 9999}
-</style>
+看板管理多个容器及子条目，允许用户通过拖拽为字条目排序，并将条目从一个容器拖动到另一个容器。
+
+拖动时会在文档中插入被拖动元素的**影子元素**，会跟随鼠标光标位置，用于指示当前拖动的位置。
 
-## 示例
+## 综合示例
 
 使用鼠标来拖拽项目。
 
-<div class="example margin-zero">
-  <div class="boards">
-    <div class="board panel">
+<example class="margin-zero">
+  <div class="boards" id="myBoard">
+    <div class="board panel panel-primary">
       <div class="panel-heading">
-        <strong>进行中</strong>
+        <strong>未完成</strong>
       </div>
       <div class="panel-body">
         <div class="board-list">
-          <div class="board-item">
-            设计界面
-          </div>
-          <div class="board-item">
-            撰写文档
-          </div>
-          <div class="board-item">
-            紧急的任务
-          </div>
+          <div class="board-item">测试</div>
+          <div class="board-item">发布</div>
+          <div class="board-item">庆祝</div>
+          <div class="disable-drop board-item">不可拖拽</div>
         </div>
       </div>
     </div>
-    <div class="board panel">
+    <div class="board panel panel-warning">
       <div class="panel-heading">
-        <strong>已完成</strong>
+        <strong>进行中</strong>
       </div>
       <div class="panel-body">
         <div class="board-list">
-          <div class="board-item">
-            初步设计
-          </div>
-          <div class="board-item">
-            数据库设计
-          </div>
-          <div class="board-item">
-            需求整理
-          </div>
+          <div class="board-item">设计界面</div>
+          <div class="board-item">撰写文档</div>
+          <div class="board-item">紧急的任务</div>
         </div>
       </div>
     </div>
-    <div class="board panel">
+    <div class="board panel panel-success">
       <div class="panel-heading">
-        <strong>未完成</strong>
+        <strong>已完成</strong>
       </div>
       <div class="panel-body">
         <div class="board-list">
-          <div class="board-item">
-            测试
-          </div>
-          <div class="board-item">
-            发布
-          </div>
-          <div class="board-item">
-            庆祝
-          </div>
-          <div class="disable-drop board-item">
-            不可拖拽
-          </div>
+          <div class="board-item">初步设计</div>
+          <div class="board-item">数据库设计</div>
+          <div class="board-item">需求整理</div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</example>
 
 <script>
 function afterPageLoad() {
@@ -84,3 +64,227 @@ function afterPageLoad() {
   }});
 }
 </script>
+
+<style>
+.board-item.drag-shadow {z-index: 9999}
+</style>
+
+```html
+<!-- 使用 .boards 类来管理多个 .board -->
+<div class="boards" id="myBoard">
+  <!-- .board 为单个容器 -->
+  <div class="board panel">
+    <div class="panel-heading">
+      <strong>未完成</strong>
+    </div>
+    <div class="panel-body">
+      <div class="board-list">
+        <!-- 使用 .board-item 来标识可以操作的条目 -->
+        <div class="board-item">测试</div>
+        <div class="board-item">发布</div>
+        <div class="board-item">庆祝</div>
+        <!-- 为 .board-item 添加 .disabled-dorp 类来禁止移动此条目 -->
+        <div class="disable-drop board-item">不可拖拽</div>
+      </div>
+    </div>
+  </div>
+  <div class="board panel">
+    <div class="panel-heading">
+      <strong>进行中</strong>
+    </div>
+    <div class="panel-body">
+      <div class="board-list">
+        <div class="board-item">设计界面</div>
+        <div class="board-item">撰写文档</div>
+        <div class="board-item">紧急的任务</div>
+      </div>
+    </div>
+  </div>
+  <div class="board panel">
+    <div class="panel-heading">
+      <strong>已完成</strong>
+    </div>
+    <div class="panel-body">
+      <div class="board-list">
+        <div class="board-item">初步设计</div>
+        <div class="board-item">数据库设计</div>
+        <div class="board-item">需求整理</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+/* 保证影子元素一直可见 */
+.board-item.drag-shadow {z-index: 9999}
+```
+
+```javascript
+$('#myBoards').boards({
+    drop: function(e){
+        $.zui.messager.show(e.element.text() + " 拖放到 " + e.target.closest('.board').find('.panel-heading').text());
+    }
+});
+```
+
+## HTML 结构
+
+为了使得看板交互正常工作，看板使用特定的 CSS 类来标识特定元素，一般情况下看板的 HTML 结构如下：
+
+```html
+<div class="boards">
+  <div class="board">
+    <div class="board-list">
+      <div class="board-item">...</div>
+      <div class="board-item">...</div>
+      <div class="board-item">...</div>
+      ...
+    </div>
+  </div>
+  <div class="board">
+    ...
+  </div>
+  ...
+</div>
+```
+
+特殊类说明：
+
+ - `.boards`：看板顶层容器；
+ - `.board`：标识一个看板容器，应作为 `.boards` 的直接子元素或子元素的后代元素；
+ - `.board-list`：看板列表容器，应作为 `.board` 的直接子元素或子元素的后代元素；
+ - `.board-item`：看板列表条目，必须为 `.board-list` 的直接子元素；
+ - `.board-item-shadow`：当拖动时由程序动态生成的被拖动看板列表条目的影子元素，为 `.board-list` 的直接子元素。
+
+只要保证各个特殊类的层级关系，你可以自由定制自己的看板结构。
+
+## 选项
+
+在进行初始化时允许传入一个对象参数作为初始化选项。可以使用的选项如下：
+
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>选项</th>
+      <th>名称</th>
+      <th>可选值</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`lang`</td>
+      <td>界面语言</td>
+      <td>
+        <ul>
+          <li>`null`（默认）</li>
+          <li>`'zh-cn'`</li>
+          <li>`'zh-tw'`</li>
+          <li>`'en'`</li>
+        </ul>
+      </td>
+      <td>指定界面所使用的语言，如果设置为 `null`，则会自动根据 `<html>` 元素上的 `[lang]` 属性来判断语言。</td>
+    </tr>
+    <tr>
+      <td>`langs`</td>
+      <td>设定界面各种语言文本</td>
+      <td>默认为：<pre><code>{
+    'zh_cn': {
+        append2end: '移动到末尾'
+    },
+    'zh_tw': {
+        append2end: '移动到末尾'
+    },
+    'en': {
+        append2end: 'Move to the end.'
+    }
+}</code></pre></td>
+      <td>使用此选项来自定义语言。</td>
+    </tr>
+    <tr>
+      <td>`before`</td>
+      <td>拖动前回调函数</td>
+      <td>默认不设置</td>
+      <td>指定一个回调函数在拖动发生前（`mousedown` 事件发生时）调用，在此回调函数中返回 `false` 来取消此次拖动操作。</td>
+    </tr>
+    <tr>
+      <td>`drop`</td>
+      <td>拖动并有效放置的回调函数</td>
+      <td>默认不设置</td>
+      <td>指定一个回调函数在完成移动目标元素时前（`mouseup` 事件发生时）并且已经将目标元素拖动到有效的可放置元素上时调用。</td>
+    </tr>
+    <tr>
+      <td>`droppable`</td>
+      <td>设定拖放插件选项</td>
+      <td>默认不设置</td>
+      <td>指定一个选项来重新设置 [**插件 → 拖放**](#javascript/droppable) 的选项。</td>
+    </tr>
+  </tbody>
+</table>
+
+使用选项：
+
+```javascript
+// 定义选项对象
+var options = {
+    drop: function(e) {
+        console.log('成功拖到目标：', e);
+    },
+    // 设置更多选项...
+};
+
+// 初始化时传入选项参数
+$('#myBoards').boards(options)
+```
+
+## 处理看板交互过程
+
+使用选项 `before` 和 `drop` 的回调函数来处理看板的交互过程。
+
+### <span class="code">before(e)</span>
+
+`before(e)` 回调函数在拖动发生之前调用，用于处理拖动前的操作或者决定取消后续的拖动事件，该回调函数参数 `e` 包含的属性定义如下：
+
+ - `e.event`：鼠标按下时 `mousedown` 事件参数对象；
+ - `e.element`：被拖动元素。
+
+在该回调函数中返回 `false` 会取消这次拖动操作，后续相关事件也不会发生。
+
+```javascript
+$('#dragBtn').draggable({
+    before: function(e) {
+        console.log('现在不是拖动的好时机，取消这次拖动操作。');
+
+        // 通过返回 false 来取消这次拖动操作
+        return false;
+    }
+})
+```
+
+### <span class="code">drop(e)</span>
+
+`drop(e)` 拖动完成时被调用。该回调函数参数 `e` 包含的属性定义如下：
+
+ - `e.event`：鼠标移动时 `mousemove` 事件参数对象；
+ - `e.element`：被拖动元素；
+ - `e.target`：如果现在已经被拖到一个可放置的目标元素，则该属性指示该可放置的元素，否则值为 `null`；
+ - `e.position`：被拖动元素当前相对父级容器（`container` 指定）的位置；
+ - `e.offset`：被拖动元素当前相对于开始拖动时的位置变化；
+ - `e.mouseOffset`：当前光标位置相对于当前相对父级容器（`container` 指定）的位置；
+ - `e.clickOffset`：当鼠标按下时相对于被拖动元素左上角的位置；
+ - `e.isIn`：指示当前被拖动位置是否已经被拖到其中一个可放置元素上；
+ - `e.isNew`：指示被拖动元素相对于拖动之前的位置是否被拖到一个新的可放置元素上；
+ - `e.selfTarget`：指示当前是否拖到自身所在的位置。
+
+### <span class="code">droppable</span>
+
+看板的拖放实现使用的 [**插件 → 拖放**](#javascript/droppable)。你可以使用 `droppable` 选项来重新设定该插件选项。拖放插件选项定义及用法参见拖放插件文档。
+
+`droppable` 选项中的以下选项不应该被设定，因为这些选项由看板来接管，如果覆盖后可能会导致看板交互无法正常工作的问题：
+
+ - `start`
+ - `drag`
+ - `drop`
+ - `finish`
+ - `target`