diff --git a/examples/01-example.vue b/examples/01-example.vue
index 34bd853..e132fbd 100644
--- a/examples/01-example.vue
+++ b/examples/01-example.vue
@@ -2,7 +2,7 @@
   <md-card>
     <md-card-actions v-md-ink-ripple>
       <div class="md-subhead">
-        <span>Base Example</span>
+        <span>Horizontal Base Example</span>
       </div>
       <md-button class="md-icon-button"
                  target="_blank"
@@ -14,12 +14,12 @@
       <!-- drag-zone -->
       <drag-zone class="zone">
         <div class="item i1">item1</div>
-        <drag-handle class="handle">H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i2">item2</div>
-        <drag-handle class="handle">H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i3">item3</div>
         <div class="item i4">item4</div>
-        <drag-handle class="handle" disabled>H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i5">item5</div>
       </drag-zone>
     </md-card-media>
diff --git a/examples/02-example.vue b/examples/02-example.vue
index 59cdc80..51b3236 100644
--- a/examples/02-example.vue
+++ b/examples/02-example.vue
@@ -2,7 +2,7 @@
   <md-card>
     <md-card-actions v-md-ink-ripple>
       <div class="md-subhead">
-        <span>Disabled Example</span>
+        <span>Horizontal Disabled Example</span>
       </div>
       <md-button class="md-icon-button"
                  target="_blank"
@@ -14,12 +14,12 @@
       <!-- drag-zone -->
       <drag-zone class="zone">
         <div class="item i1">item1</div>
-        <drag-handle class="handle">H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i2">item2</div>
         <div class="item i3">item3</div>
-        <drag-handle class="handle">H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i4">item4</div>
-        <drag-handle class="handle" :disabled="disabledHandle">H</drag-handle>
+        <drag-handle class="handle" :disabled="disabledHandle"></drag-handle>
         <div class="item i5">item5</div>
       </drag-zone>
     </md-card-media>
diff --git a/examples/03-example.vue b/examples/03-example.vue
index 8e3c197..2c681ba 100644
--- a/examples/03-example.vue
+++ b/examples/03-example.vue
@@ -2,7 +2,7 @@
   <md-card>
     <md-card-actions v-md-ink-ripple>
       <div class="md-subhead">
-        <span>MinWdith and MaxWidth Example</span>
+        <span>Horizontal MinWdith and MaxWidth Example</span>
       </div>
       <md-button class="md-icon-button"
                  target="_blank"
@@ -13,14 +13,14 @@
     <md-card-media>
       <!-- drag-zone -->
       <drag-zone class="zone">
-        <div class="item i1">min 100px && max 300px</div>
-        <drag-handle class="handle">H</drag-handle>
+        <div class="item i1">min 100px && max 30rem</div>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i2">item2</div>
-        <drag-handle class="handle">H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i3">item3</div>
         <div class="item i4">min 50px</div>
-        <drag-handle class="handle" disabled>H</drag-handle>
-        <div class="item i5">min 100px</div>
+        <drag-handle class="handle" disabled></drag-handle>
+        <div class="item i5">min 10em</div>
       </drag-zone>
     </md-card-media>
   </md-card>
@@ -61,7 +61,7 @@
   }
   .zone .item.i1 {
     min-width: 100px;
-    max-width: 300px;
+    max-width: 30rem;
     background: #999;
   }
   .zone .item.i2 {
@@ -75,7 +75,7 @@
     background: #333;
   }
   .zone .item.i5 {
-    min-width: 100px;
+    min-width: 10em;
     background: #000;
   }
 </style>
diff --git a/examples/04-example.vue b/examples/04-example.vue
new file mode 100644
index 0000000..6ce2195
--- /dev/null
+++ b/examples/04-example.vue
@@ -0,0 +1,81 @@
+<template>
+  <md-card>
+    <md-card-actions v-md-ink-ripple>
+      <div class="md-subhead">
+        <span>Vertical Base Example</span>
+      </div>
+      <md-button class="md-icon-button"
+                 target="_blank"
+                 href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/01-example.vue">
+        <md-icon>code</md-icon>
+      </md-button>
+    </md-card-actions>
+    <md-card-media>
+      <!-- drag-zone -->
+      <drag-zone class="zone" :options="{ direction: 'vertical' }">
+        <div class="item i1">item1</div>
+        <drag-handle class="handle"></drag-handle>
+        <div class="item i2">item2</div>
+        <drag-handle class="handle"></drag-handle>
+        <div class="item i3">item3</div>
+        <div class="item i4">item4</div>
+        <drag-handle class="handle"></drag-handle>
+        <div class="item i5">item5</div>
+      </drag-zone>
+    </md-card-media>
+  </md-card>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .zone {
+    width: 100%;
+    height: 500px;
+    margin: 0 auto;
+    position: relative;
+    clear: both;
+    text-align: center;
+    color: white;
+    background: #eee;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .zone .handle {
+    width: 100%;
+    height: 10px;
+    background: #2196f3;
+  }
+  .zone .item {
+    width: 100%;
+    height: calc((100% - 30px) / 4);
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .zone .item.i1 {
+    background: #999;
+  }
+  .zone .item.i2 {
+    background: #777;
+  }
+  .zone .item.i3 {
+    background: #555;
+  }
+  .zone .item.i4 {
+    background: #333;
+  }
+  .zone .item.i5 {
+    background: #000;
+  }
+</style>
diff --git a/examples/05-example.vue b/examples/05-example.vue
new file mode 100644
index 0000000..46f2cf1
--- /dev/null
+++ b/examples/05-example.vue
@@ -0,0 +1,83 @@
+<template>
+  <md-card>
+    <md-card-actions v-md-ink-ripple>
+      <div class="md-subhead">
+        <span>Disabled Example</span>
+      </div>
+      <md-button class="md-icon-button"
+                 target="_blank"
+                 href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/02-example.vue">
+        <md-icon>code</md-icon>
+      </md-button>
+    </md-card-actions>
+    <md-card-media>
+      <!-- drag-zone -->
+      <drag-zone class="zone">
+        <div class="item i1">item1</div>
+        <drag-handle class="handle">H</drag-handle>
+        <div class="item i2">item2</div>
+        <div class="item i3">item3</div>
+        <drag-handle class="handle">H</drag-handle>
+        <div class="item i4">item4</div>
+        <drag-handle class="handle" :disabled="disabledHandle">H</drag-handle>
+        <div class="item i5">item5</div>
+      </drag-zone>
+    </md-card-media>
+  </md-card>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        disabledHandle: true
+      }
+    },
+    mounted() {
+      setInterval(() => {
+        this.disabledHandle = !this.disabledHandle
+      }, 5000)
+    }
+  }
+</script>
+
+<style scoped>
+  .zone {
+    width: 100%;
+    height: 500px;
+    line-height: 180px;
+    margin: 0 auto;
+    position: relative;
+    clear: both;
+    text-align: center;
+    color: white;
+    background: #eee;
+    display: flex;
+    justify-content: space-between;
+  }
+  .zone .handle {
+    width: 10px;
+    height: 180px;
+    background: #2196f3;
+  }
+  .zone .item {
+    width: calc((100% - 30px) / 4);
+    height: 180px;
+    overflow: hidden;
+  }
+  .zone .item.i1 {
+    background: #999;
+  }
+  .zone .item.i2 {
+    background: #777;
+  }
+  .zone .item.i3 {
+    background: #555;
+  }
+  .zone .item.i4 {
+    background: #333;
+  }
+  .zone .item.i5 {
+    background: #000;
+  }
+</style>
diff --git a/examples/06-example.vue b/examples/06-example.vue
new file mode 100644
index 0000000..f076945
--- /dev/null
+++ b/examples/06-example.vue
@@ -0,0 +1,81 @@
+<template>
+  <md-card>
+    <md-card-actions v-md-ink-ripple>
+      <div class="md-subhead">
+        <span>MinWdith and MaxWidth Example</span>
+      </div>
+      <md-button class="md-icon-button"
+                 target="_blank"
+                 href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/03-example.vue">
+        <md-icon>code</md-icon>
+      </md-button>
+    </md-card-actions>
+    <md-card-media>
+      <!-- drag-zone -->
+      <drag-zone class="zone">
+        <div class="item i1">min 100px && max 30rem</div>
+        <drag-handle class="handle">H</drag-handle>
+        <div class="item i2">item2</div>
+        <drag-handle class="handle">H</drag-handle>
+        <div class="item i3">item3</div>
+        <div class="item i4">min 50px</div>
+        <drag-handle class="handle" disabled>H</drag-handle>
+        <div class="item i5">min 10em</div>
+      </drag-zone>
+    </md-card-media>
+  </md-card>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .zone {
+    width: 100%;
+    height: 180px;
+    line-height: 180px;
+    margin: 0 auto;
+    position: relative;
+    clear: both;
+    text-align: center;
+    color: white;
+    background: #eee;
+    display: flex;
+    justify-content: space-between;
+  }
+  .zone .handle {
+    width: 10px;
+    height: 180px;
+    background: #2196f3;
+  }
+  .zone .item {
+    width: calc((100% - 30px) / 4);
+    height: 180px;
+    overflow: hidden;
+  }
+  .zone .item.i1 {
+    min-width: 100px;
+    max-width: 30rem;
+    background: #999;
+  }
+  .zone .item.i2 {
+    background: #777;
+  }
+  .zone .item.i3 {
+    background: #555;
+  }
+  .zone .item.i4 {
+    min-width: 50px;
+    background: #333;
+  }
+  .zone .item.i5 {
+    min-width: 10em;
+    background: #000;
+  }
+</style>
diff --git a/examples/index.js b/examples/index.js
index 3765758..dbb79cd 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -1,9 +1,15 @@
 import example01 from './01-example.vue'
 import example02 from './02-example.vue'
 import example03 from './03-example.vue'
+import example04 from './04-example.vue'
+// import example05 from './05-example.vue'
+// import example06 from './06-example.vue'
 
 module.exports = {
   example01,
   example02,
-  example03
+  example03,
+  example04,
+  // example05,
+  // example06
 }
diff --git a/handle.bak.vue b/handle.bak.vue
new file mode 100644
index 0000000..526908b
--- /dev/null
+++ b/handle.bak.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="drag-handle" :class="{ 'disabled': disabled }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery'
+  export default {
+    name: 'drag-handle',
+    props: ['disabled'],
+    mounted() {
+      this.dragHandleBuild()
+    },
+    methods: {
+      dragHandleBuild() {
+
+        // self
+        let self = this
+
+        // 父容器宽高信息
+        let $wrap = $(this.$parent.$el)
+
+        // 父容器宽度
+        let warpClientWidth = $wrap[0].clientWidth
+
+        // 载体本身
+        let $currentLabel = $(this.$el)
+
+        // 载体宽高
+        let currentLabelWidth = $currentLabel[0].clientWidth
+        let currentLabelHeight = $currentLabel[0].clientHeight
+
+        // 计算元素组的指定属性之和
+        let elementsWidths = (elements = [], attr = 'minWidth', notReduce = false) => {
+          if (!elements.length) return 0
+          let elementsArr =  Array.from(elements).map(label => {
+            let labelWidth = $(label).css(attr)
+            if (!labelWidth || labelWidth === 'auto') {
+              labelWidth = 0
+            } else {
+              labelWidth = parseInt(labelWidth)
+            }
+            return labelWidth
+          })
+          return notReduce ? elementsArr : elementsArr.reduce((preValue, curValue) => { return preValue + curValue })
+        }
+
+        // 给当前label绑定事件
+        $currentLabel.bind('mousedown', function(e) {
+
+          // 判断是否禁用
+          if (self.disabled) return false
+
+          console.log(this.$parent)
+
+          // 父容器左边绝对位置
+          let wrapOffsetLeft = $wrap.offset().left
+
+          // 要设置的属性
+          let buildStyle = 'width'
+
+          // 获取前后的所有兄弟元素
+          let $prevAll = $currentLabel.prevAll()
+          let $nextAll = $currentLabel.nextAll()
+          let $prevLabels = $prevAll.filter('.drag-handle')
+          let $nextLabels = $nextAll.filter('.drag-handle')
+          let $prevLabel = $prevLabels[0] ? $($prevLabels[0]) : null
+          let $nextLabel = $nextLabels[0] ? $($nextLabels[0]) : null
+          let prevLabelOffsetLeft = null
+          let nextLabelOffsetLeft = null
+          let prevLabelOffsetTop = null
+          let nextLabelOffsetTop = null
+
+          // 获取到前后紧邻的Label的距左距离
+          if ($prevLabels.length) prevLabelOffsetLeft = $($prevLabels[0]).offset().left
+          if ($nextLabels.length) nextLabelOffsetLeft = $($nextLabels[0]).offset().left
+
+          // 前面需要设置样式的元素集合
+          let prevElementsToDo = $prevLabel ? $currentLabel.prevUntil('.drag-handle') : $prevAll
+
+          // 后面需要设置样式的元素集合
+          let nextElementsToDo = $nextLabel ? $currentLabel.nextUntil('.drag-handle') : $nextAll
+
+          // 前面的元素的最小宽度之和
+          let prevElementsMinWidths = elementsWidths(prevElementsToDo)
+
+          // 前面的元素的最大宽度之和
+          let prevElementsMaxWidths = elementsWidths(prevElementsToDo, 'maxWidth')
+
+          // 后面的元素的最小宽度之和
+          let nextElementsMinWidths = elementsWidths(nextElementsToDo)
+
+          // 监听移动
+          $(document).bind('mousemove', function(event) {
+
+            if (self.disabled) return false
+
+            // 鼠标X轴
+            let mouseX = event.pageX
+
+            // 可移动的最小范围
+
+            // 如果左边有label，则应该是label的左边距加左边label的宽度
+            // 如果左边没有label，则应该是父容器的距左距离
+            // 无论什么情况，如果左边元素有min属性，则应该要加上min属性值的总和
+            let minScope = ($prevLabel ? (prevLabelOffsetLeft + $prevLabel[0].clientWidth) : wrapOffsetLeft) + prevElementsMinWidths
+
+            // 可移动的最大范围
+
+            // 如果左边有max，则计算出左边max的总和， + label的左边距加左边label的宽度 = max
+            // 如果左边没有max
+            //  - 如果右边有label，则应该是右边label的距左距离
+            //  - 否则是父容器宽度 + 父容器距左边距
+            //  - 无论上面任意情况，如果右边元素有min属性，则应该要减去这个属性值的总和
+            let maxScope
+            if (!!prevElementsMaxWidths) {
+              maxScope = prevElementsMaxWidths + ($prevLabel ? (prevLabelOffsetLeft + $prevLabel[0].clientWidth) : wrapOffsetLeft)
+            } else {
+              if (nextLabelOffsetLeft) maxScope = nextLabelOffsetLeft
+              if (!nextLabelOffsetLeft) maxScope = warpClientWidth + wrapOffsetLeft
+              maxScope -= (currentLabelWidth + nextElementsMinWidths)
+            }
+
+            // 限制最大最小范围
+            if (mouseX < minScope) mouseX = minScope
+            if (mouseX > maxScope) mouseX = maxScope
+
+            // 设置左边元素的宽度
+            if (prevElementsToDo.length) {
+              let toDoWidth
+              if (prevLabelOffsetLeft) {
+                toDoWidth = mouseX - prevLabelOffsetLeft - currentLabelWidth
+              } else {
+                toDoWidth = mouseX - wrapOffsetLeft
+              }
+
+              // 如果toDoWidth还大于minwidth之和，则分配
+              if (toDoWidth > prevElementsMinWidths) {
+
+                // 平均值
+                let average = toDoWidth / prevElementsToDo.length
+
+                // 最大minwidth
+                let prevElementsMinMaxWidth = Math.max.apply(null, elementsWidths(prevElementsToDo, 'minWidth', true))
+
+                // console.log(average, prevElementsMinMaxWidth)
+
+                // 如果平均分配的值大于最大的minwidth，则平均分配
+                if (average >= prevElementsMinMaxWidth) {
+                  prevElementsToDo.css(buildStyle, toDoWidth / prevElementsToDo.length)
+                } else {
+                  // 否则，开始特殊分配
+                  // 给有minwidth的全部width设置为自己的minwidth
+                  let notHasMinWidthElements = []
+                  Array.from(prevElementsToDo).forEach(element => {
+                    let minWidth = $(element).css('minWidth')
+                    if (minWidth !== 'auto') {
+                      $(element).css('width', minWidth)
+                    } else {
+                      notHasMinWidthElements.push(element)
+                    }
+                  })
+                  // 给没有minwidth的设置(toDoWidth - minwidth之和) / 自己数量
+                  $(notHasMinWidthElements).css(buildStyle, (toDoWidth - prevElementsMinMaxWidth) / notHasMinWidthElements.length)
+                  // console.log($(notHasMinWidthElements))
+                }
+              }
+            }
+
+            // 设置右边元素的宽度
+            if (nextElementsToDo.length) {
+
+              let toDoWidth
+              if (nextLabelOffsetLeft) {
+                toDoWidth = nextLabelOffsetLeft - mouseX
+              } else {
+                toDoWidth = warpClientWidth - (mouseX - wrapOffsetLeft)
+              }
+              toDoWidth -= currentLabelWidth
+
+              // 如果toDoWidth还大于minwidth之和，则分配
+              if (toDoWidth > nextElementsMinWidths) {
+
+                // 平均值
+                let average = toDoWidth / nextElementsToDo.length
+
+                // 最大minwidth
+                let nextElementsMinMaxWidth = Math.max.apply(null, elementsWidths(nextElementsToDo, 'minWidth', true))
+
+                // console.log(average, nextElementsMinMaxWidth)
+
+                // 如果平均分配的值大于最大的minwidth，则平均分配
+                if (average >= nextElementsMinMaxWidth) {
+                  nextElementsToDo.css(buildStyle, toDoWidth / nextElementsToDo.length)
+                } else {
+                  // 否则，开始特殊分配
+                  // 给有minwidth的全部width设置为自己的minwidth
+                  let notHasMinWidthElements = []
+                  Array.from(nextElementsToDo).forEach(element => {
+                    let minWidth = $(element).css('minWidth')
+                    if (minWidth !== 'auto') {
+                      $(element).css('width', minWidth)
+                    } else {
+                      notHasMinWidthElements.push(element)
+                    }
+                  })
+                  // 给没有minwidth的设置(toDoWidth - minwidth之和) / 自己数量
+                  $(notHasMinWidthElements).css(buildStyle, (toDoWidth - nextElementsMinMaxWidth) / notHasMinWidthElements.length)
+                  // console.log($(notHasMinWidthElements))
+                }
+              }
+            }
+          })
+        })
+
+        // 移除监听事件
+        $(document).bind('mouseup', function(event) {
+          $(document).unbind('mousemove')
+          event.cancelBubble = true
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .drag-handle {
+    cursor: e-resize;
+  }
+  .drag-handle.disabled {
+    opacity: .5;
+    cursor: no-drop;
+  }
+</style>
diff --git a/handle.vue b/handle.vue
index 44468cc..7af9176 100644
--- a/handle.vue
+++ b/handle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="drag-handle" :class="{ 'disabled': disabled }">
+  <div class="drag-handle" :class="{ 'disabled': disabled, 'horizontal': horizontal, 'vertical': !horizontal }">
     <slot></slot>
   </div>
 </template>
@@ -12,82 +12,97 @@
     mounted() {
       this.dragHandleBuild()
     },
+    computed: {
+      horizontal() {
+        return Object.is(this.$parent.options.direction, 'horizontal')
+      }
+    },
     methods: {
       dragHandleBuild() {
 
-        // self
         let self = this
 
+        // 模式
+        let horizontal = self.horizontal
+
         // 父容器宽高信息
         let $wrap = $(this.$parent.$el)
 
         // 父容器宽度
         let warpClientWidth = $wrap[0].clientWidth
+        let warpClientHeight = $wrap[0].clientHeight
 
         // 载体本身
-        let $currentLabel = $(this.$el)
+        let $currentHandle = $(this.$el)
 
         // 载体宽高
-        let currentLabelWidth = $currentLabel[0].clientWidth
-        let currentLabelHeight = $currentLabel[0].clientHeight
+        let currentHandleWidth = $currentHandle[0].clientWidth
+        let currentHandleHeight = $currentHandle[0].clientHeight
 
         // 计算元素组的指定属性之和
-        let elementsWidths = (elements = [], attr = 'minWidth', notReduce = false) => {
+        let elementsAttrs = (elements = [], attr = 'minWidth', notReduce = false) => {
           if (!elements.length) return 0
-          let elementsArr =  Array.from(elements).map(label => {
-            let labelWidth = $(label).css(attr)
-            if (!labelWidth || labelWidth === 'auto') {
-              labelWidth = 0
+          let elementsArr =  Array.from(elements).map(element => {
+            let elementAttr = $(element).css(attr)
+            if (!elementAttr || elementAttr === 'auto') {
+              elementAttr = 0
             } else {
-              labelWidth = parseInt(labelWidth)
+              elementAttr = parseInt(elementAttr)
             }
-            return labelWidth
+            return elementAttr
           })
           return notReduce ? elementsArr : elementsArr.reduce((preValue, curValue) => { return preValue + curValue })
         }
 
         // 给当前label绑定事件
-        $currentLabel.bind('mousedown', function(e) {
+        $currentHandle.bind('mousedown', function(e) {
 
           // 判断是否禁用
           if (self.disabled) return false
 
-          // 父容器左边绝对位置
+          // 父容器绝对位置
           let wrapOffsetLeft = $wrap.offset().left
+          let wrapOffsetTop = $wrap.offset().top
 
           // 要设置的属性
-          let buildStyle = 'width'
+          let buildStyle = horizontal ? 'width' : 'height'
 
           // 获取前后的所有兄弟元素
-          let $prevAll = $currentLabel.prevAll()
-          let $nextAll = $currentLabel.nextAll()
-          let $prevLabels = $prevAll.filter('.drag-handle')
-          let $nextLabels = $nextAll.filter('.drag-handle')
-          let $prevLabel = $prevLabels[0] ? $($prevLabels[0]) : null
-          let $nextLabel = $nextLabels[0] ? $($nextLabels[0]) : null
-          let prevLabelOffsetLeft = null
-          let nextLabelOffsetLeft = null
-          let prevLabelOffsetTop = null
-          let nextLabelOffsetTop = null
-
-          // 获取到前后紧邻的Label的距左距离
-          if ($prevLabels.length) prevLabelOffsetLeft = $($prevLabels[0]).offset().left
-          if ($nextLabels.length) nextLabelOffsetLeft = $($nextLabels[0]).offset().left
+          let $prevAll = $currentHandle.prevAll()
+          let $nextAll = $currentHandle.nextAll()
+          let $prevHandles = $prevAll.filter('.drag-handle')
+          let $nextHandles = $nextAll.filter('.drag-handle')
+          let $prevHandle = $prevHandles[0] ? $($prevHandles[0]) : null
+          let $nextHandle = $nextHandles[0] ? $($nextHandles[0]) : null
+          let prevHandleOffsetLeft = null
+          let nextHandleOffsetLeft = null
+          let prevHandleOffsetTop = null
+          let nextHandleOffsetTop = null
+
+          // 获取到前后紧邻的Handle的距左/上距离
+          if ($prevHandles.length) {
+            horizontal && (prevHandleOffsetLeft = $($prevHandles[0]).offset().left)
+            !horizontal && (prevHandleOffsetTop = $($prevHandles[0]).offset().top)
+          }
+          if ($nextHandles.length) {
+            horizontal && (nextHandleOffsetLeft = $($nextHandles[0]).offset().left)
+            !horizontal && (nextHandleOffsetTop = $($nextHandles[0]).offset().top)
+          }
 
           // 前面需要设置样式的元素集合
-          let prevElementsToDo = $prevLabel ? $currentLabel.prevUntil('.drag-handle') : $prevAll
+          let prevElementsToDo = $prevHandle ? $currentHandle.prevUntil('.drag-handle') : $prevAll
 
           // 后面需要设置样式的元素集合
-          let nextElementsToDo = $nextLabel ? $currentLabel.nextUntil('.drag-handle') : $nextAll
+          let nextElementsToDo = $nextHandle ? $currentHandle.nextUntil('.drag-handle') : $nextAll
 
           // 前面的元素的最小宽度之和
-          let prevElementsMinWidths = elementsWidths(prevElementsToDo)
+          let prevElementsMinWidths = elementsAttrs(prevElementsToDo)
 
           // 前面的元素的最大宽度之和
-          let prevElementsMaxWidths = elementsWidths(prevElementsToDo, 'maxWidth')
+          let prevElementsMaxWidths = elementsAttrs(prevElementsToDo, 'maxWidth')
 
           // 后面的元素的最小宽度之和
-          let nextElementsMinWidths = elementsWidths(nextElementsToDo)
+          let nextElementsMinWidths = elementsAttrs(nextElementsToDo)
 
           // 监听移动
           $(document).bind('mousemove', function(event) {
@@ -102,7 +117,7 @@
             // 如果左边有label，则应该是label的左边距加左边label的宽度
             // 如果左边没有label，则应该是父容器的距左距离
             // 无论什么情况，如果左边元素有min属性，则应该要加上min属性值的总和
-            let minScope = ($prevLabel ? (prevLabelOffsetLeft + $prevLabel[0].clientWidth) : wrapOffsetLeft) + prevElementsMinWidths
+            let minScope = ($prevHandle ? (prevHandleOffsetLeft + $prevHandle[0].clientWidth) : wrapOffsetLeft) + prevElementsMinWidths
 
             // 可移动的最大范围
 
@@ -113,11 +128,11 @@
             //  - 无论上面任意情况，如果右边元素有min属性，则应该要减去这个属性值的总和
             let maxScope
             if (!!prevElementsMaxWidths) {
-              maxScope = prevElementsMaxWidths + ($prevLabel ? (prevLabelOffsetLeft + $prevLabel[0].clientWidth) : wrapOffsetLeft)
+              maxScope = prevElementsMaxWidths + ($prevHandle ? (prevHandleOffsetLeft + $prevHandle[0].clientWidth) : wrapOffsetLeft)
             } else {
-              if (nextLabelOffsetLeft) maxScope = nextLabelOffsetLeft
-              if (!nextLabelOffsetLeft) maxScope = warpClientWidth + wrapOffsetLeft
-              maxScope -= (currentLabelWidth + nextElementsMinWidths)
+              if (nextHandleOffsetLeft) maxScope = nextHandleOffsetLeft
+              if (!nextHandleOffsetLeft) maxScope = warpClientWidth + wrapOffsetLeft
+              maxScope -= (currentHandleWidth + nextElementsMinWidths)
             }
 
             // 限制最大最小范围
@@ -127,14 +142,11 @@
             // 设置左边元素的宽度
             if (prevElementsToDo.length) {
               let toDoWidth
-              if (prevLabelOffsetLeft) {
-                toDoWidth = mouseX - prevLabelOffsetLeft - currentLabelWidth
+              if (prevHandleOffsetLeft) {
+                toDoWidth = mouseX - prevHandleOffsetLeft - currentHandleWidth
               } else {
                 toDoWidth = mouseX - wrapOffsetLeft
               }
-              // 给有minwidth的全部width设置为自己的minwidth
-              // 给没有minwidth的设置toDoWidth - minwidth之和 / 自己数量
-              // prevElementsToDo.css(buildStyle, toDoWidth / prevElementsToDo.length)
 
               // 如果toDoWidth还大于minwidth之和，则分配
               if (toDoWidth > prevElementsMinWidths) {
@@ -143,9 +155,9 @@
                 let average = toDoWidth / prevElementsToDo.length
 
                 // 最大minwidth
-                let prevElementsMinMaxWidth = Math.max.apply(null, elementsWidths(prevElementsToDo, 'minWidth', true))
+                let prevElementsMinMaxWidth = Math.max.apply(null, elementsAttrs(prevElementsToDo, 'minWidth', true))
 
-                console.log(average, prevElementsMinMaxWidth)
+                // console.log(average, prevElementsMinMaxWidth)
 
                 // 如果平均分配的值大于最大的minwidth，则平均分配
                 if (average >= prevElementsMinMaxWidth) {
@@ -164,7 +176,7 @@
                   })
                   // 给没有minwidth的设置(toDoWidth - minwidth之和) / 自己数量
                   $(notHasMinWidthElements).css(buildStyle, (toDoWidth - prevElementsMinMaxWidth) / notHasMinWidthElements.length)
-                  console.log($(notHasMinWidthElements))
+                  // console.log($(notHasMinWidthElements))
                 }
               }
             }
@@ -173,12 +185,12 @@
             if (nextElementsToDo.length) {
 
               let toDoWidth
-              if (nextLabelOffsetLeft) {
-                toDoWidth = nextLabelOffsetLeft - mouseX
+              if (nextHandleOffsetLeft) {
+                toDoWidth = nextHandleOffsetLeft - mouseX
               } else {
                 toDoWidth = warpClientWidth - (mouseX - wrapOffsetLeft)
               }
-              toDoWidth -= currentLabelWidth
+              toDoWidth -= currentHandleWidth
 
               // 如果toDoWidth还大于minwidth之和，则分配
               if (toDoWidth > nextElementsMinWidths) {
@@ -187,7 +199,7 @@
                 let average = toDoWidth / nextElementsToDo.length
 
                 // 最大minwidth
-                let nextElementsMinMaxWidth = Math.max.apply(null, elementsWidths(nextElementsToDo, 'minWidth', true))
+                let nextElementsMinMaxWidth = Math.max.apply(null, elementsAttrs(nextElementsToDo, 'minWidth', true))
 
                 // console.log(average, nextElementsMinMaxWidth)
 
@@ -226,9 +238,12 @@
 </script>
 
 <style scoped>
-  .drag-handle {
+  .drag-handle.horizontal {
     cursor: e-resize;
   }
+  .drag-handle.vertical {
+    cursor: n-resize;
+  }
   .drag-handle.disabled {
     opacity: .5;
     cursor: no-drop;
diff --git a/zone.vue b/zone.vue
index 94fd513..f34c1f6 100644
--- a/zone.vue
+++ b/zone.vue
@@ -6,7 +6,17 @@
 
 <script>
   export default {
-    name: 'drag-zone'
+    name: 'drag-zone',
+    props: {
+      options: {
+        type: Object,
+        default() {
+          return {
+            direction: 'horizontal'
+          }
+        }
+      }
+    }
   }
 </script>