diff --git a/one/docs/demo/directives/drag/sort-x.vue b/one/docs/demo/directives/drag/sort-x.vue
new file mode 100644
index 0000000..e6c108d
--- /dev/null
+++ b/one/docs/demo/directives/drag/sort-x.vue
@@ -0,0 +1,126 @@
+<template>
+<article>
+  <section ref="itemGroup">
+    <h2>Axis: X（v-drag.sort.x）</h2>
+    <transition-group
+      ref="transitionGroup"
+      name="list"
+      tag="div"
+      class="items"
+    >
+      <div
+        v-for="item in items"
+        :key="item"
+        v-drag.sort.x="{
+          name: 'mySortableButton',
+          containment: 'itemGroup',
+          callback: handleAxisXSortCallback,
+          debug,
+          align
+        }"
+        class="item"
+      >
+        {{ item }}
+      </div>
+    </transition-group>
+  </section>
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+const items = [
+  '须菩提',
+  '菩萨亦如是',
+  '若作是言',
+  '我当灭度无量众生',
+  '即不名菩萨',
+  '🍎🍎',
+  '🍋',
+  '🍉🍉🍉',
+  '🍓🍓',
+  '何以故',
+  '须菩提',
+  '无有法名为菩萨',
+  '是故佛说',
+  '一切法无我',
+  '无人',
+  '无众生',
+  '无寿者'
+]
+
+export default {
+  directives: {
+    drag
+  },
+  data () {
+    return {
+      debug: false,
+      align: undefined,
+      items: items.map((item, i) => `${i}. ${item}`)
+    }
+  },
+  computed: {
+    handleAxisXSortCallback () {
+      return this.getTransitionSortCallback('items', 'transitionGroup')
+    }
+  },
+  methods: {
+    getTransitionSortCallback (itemsKey, transitionGroupRefKey) {
+      return (toIndex, fromIndex) => {
+        if (toIndex === fromIndex) {
+          return
+        }
+        let promise
+        if (transitionGroupRefKey) {
+          promise = new Promise((resolve, reject) => {
+            let el = this.$refs[transitionGroupRefKey].$el
+            let handleTransitionEnd = () => {
+              el.removeEventListener('transitionend', handleTransitionEnd)
+              resolve()
+            }
+            el.addEventListener('transitionend', handleTransitionEnd)
+          })
+        }
+        this.moveItem(this[itemsKey], fromIndex, toIndex)
+        // 动画完了再回调成功
+        return promise
+      }
+    },
+    moveItem (items, fromIndex, toIndex) {
+      let item = items[fromIndex]
+      items.splice(fromIndex, 1)
+      if (toIndex > fromIndex) {
+        toIndex--
+      }
+      items.splice(toIndex, 0, item)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.item {
+  background: white;
+  border: 1px solid pink;
+  border-radius: 3px;
+  margin: 0 10px 8px 0;
+  padding: 1px 2px;
+
+  &:nth-child(3n) {
+    font-size: 1.2em;
+  }
+}
+
+.list-move {
+  // UE 给出的动画曲线是 0.25, 0.1, 0.25, 1，就是 ease
+  transition: transform 200ms ease;
+}
+</style>
diff --git a/one/docs/demo/directives/drag/sort-y.vue b/one/docs/demo/directives/drag/sort-y.vue
new file mode 100644
index 0000000..57694d5
--- /dev/null
+++ b/one/docs/demo/directives/drag/sort-y.vue
@@ -0,0 +1,132 @@
+<template>
+<article>
+  <section>
+    <h2>Axis: Y（v-drag.sort.y）</h2>
+    <transition-group
+      ref="transitionGroup2"
+      name="list"
+      tag="ol"
+      class="list"
+    >
+      <li
+        v-for="item in items2"
+        :key="item"
+        v-drag.sort.y="{
+          name: 'otherSortableButton',
+          callback: handleAxisYSortCallback,
+          debug,
+          align
+        }"
+        class="item"
+      >
+        {{ item }}
+      </li>
+    </transition-group>
+  </section>
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+const items = [
+  '须菩提',
+  '若菩萨作是言',
+  '我当庄严佛土',
+  '是不名菩萨',
+  '何以故',
+  '🦁',
+  '🙈🙉🙊',
+  '🐷🐶',
+  '如来说',
+  '庄严佛土者',
+  '即非庄严',
+  '是名庄严',
+  '须菩提',
+  '若菩萨通达无我法者'
+]
+
+export default {
+  directives: {
+    drag
+  },
+  data () {
+    return {
+      debug: false,
+      align: undefined,
+      items2: items.map((item, i) => `${i}${item}`)
+    }
+  },
+  computed: {
+    handleAxisYSortCallback () {
+      return this.getTransitionSortCallback('items2', 'transitionGroup2')
+    },
+  },
+  methods: {
+    getTransitionSortCallback (itemsKey, transitionGroupRefKey) {
+      return (toIndex, fromIndex) => {
+        if (toIndex === fromIndex) {
+          return
+        }
+        let promise
+        if (transitionGroupRefKey) {
+          promise = new Promise((resolve, reject) => {
+            let el = this.$refs[transitionGroupRefKey].$el
+            let handleTransitionEnd = () => {
+              el.removeEventListener('transitionend', handleTransitionEnd)
+              resolve()
+            }
+            el.addEventListener('transitionend', handleTransitionEnd)
+          })
+        }
+        this.moveItem(this[itemsKey], fromIndex, toIndex)
+        // 动画完了再回调成功
+        return promise
+      }
+    },
+    moveItem (items, fromIndex, toIndex) {
+      let item = items[fromIndex]
+      items.splice(fromIndex, 1)
+      if (toIndex > fromIndex) {
+        toIndex--
+      }
+      items.splice(toIndex, 0, item)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.item {
+  background: white;
+  border: 1px solid pink;
+  border-radius: 3px;
+  margin: 0 10px 8px 0;
+  padding: 1px 2px;
+
+  &:nth-child(3n) {
+    font-size: 1.2em;
+  }
+}
+
+.list {
+  padding: 0;
+  list-style-position: inside;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 300px;
+  resize: both;
+  overflow: scroll;
+
+  .item {
+    width: 40%;
+    border-color: peachpuff;
+  }
+}
+
+.list-move {
+  // UE 给出的动画曲线是 0.25, 0.1, 0.25, 1，就是 ease
+  transition: transform 200ms ease;
+}
+</style>
diff --git a/one/docs/directives/v-drag.md b/one/docs/directives/v-drag.md
index 4e4aca3..8fe0f17 100644
--- a/one/docs/directives/v-drag.md
+++ b/one/docs/directives/v-drag.md
@@ -22,6 +22,14 @@
 
 [[ demo src="/demo/directives/drag/axis.vue" ]]
 
+水平排序。
+
+[[ demo src="/demo/directives/drag/sort-x.vue" ]]
+
+垂直排序。
+
+[[ demo src="/demo/directives/drag/sort-y.vue" ]]
+
 ## API
 
 :::tip
@@ -41,6 +49,7 @@
 | `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做变换。取值为：`x`、`y`。 |
 | `dragstart` | `function(): Object` | `function() {}` | [^dragstart] |
 | `drag` | `function(): Object` | `function() {}` | [^drag] |
+| `disabled` | `boolean` | `false` | 动态开关该指令 |
 | `dragend` | `function(): Object` | `function() {}` | 鼠标拖拽结束事件的回调函数。回调参数同 `drag`。 |
 | `ready` | `function` | `function() {}` | 指令初始化完成的回调函数，会传出一个句柄对象参数，该对象上有一个 `reset()` 方法，用于将所有目标元素重置为变换之前的样子。 |
 
@@ -108,6 +117,31 @@
 <div v-drag:box1,box2></div>
 ```
 
+
+## 拖拽排序（v-drag.sort）
+
+可以通过 `v-drag.sort` 或 `v-drag="{type: 'sort', ...}"` 来实现拖拽排序
+
+### 绑定值
+
+类型：`Object`。
+
+| 参数 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `name` | `string` | - | 用来标记一组项目，在这组项目中进行排序。 |
+| `type` | `string` | - | 该参数指定变化的类型，拖拽排序是 `sort` 。 |
+| `containment` | `string|Vue|HTMLElement|Object` | - | 参见上面的基础描述 |
+| `axis` | `string` | - | 限制所有目标元素只能在水平或者垂直方向上做排序。取值为：`x`、`y`。 |
+| `callback` | `function(toIndex: number, fromIndex: number): void` | - | [^sort_callback] |
+| `debug` | `boolean` | `false` | 在开发模式（process.env.NODE_ENV === 'development'）下在 DOM 上显示热区标记以方便调试。 |
+
+^^^sort_callback
+排序指令仅仅通过该回调告诉用户排序的情况，即：从原来位置（`fromIndex`）移动到新位置（`toIndex`）,用户自己应该在该回调中对数据源进行调整位置。
+
+** 回调触发时机：当 *fromIndex* 元素的中心点拖动到热区（*toIndex* 元素尾部和 *toIndex+1* 元素首部之间的区域）中触发。**
+
+^^^
+
 ## 扩展
 
 可以通过继承 `BaseHandler` 扩展 `v-drag` 指令：