Update

surmon-china · Dec 22, 2016 · d029394 · d029394
1 parent 8c6c448
commit d029394
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 138 deletions.
diff --git a/README.md b/README.md
@@ -7,8 +7,11 @@
 [![NPM](https://nodei.co/npm/vue-drag-zone.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-drag-zone/)
 
 
-# Vue-Drag-Zone
-Drag Zone component for Vue.js(2.x)，适用于Vue2的dom拖动组件。
+> ### v1.2.0
+> 增加：支持竖向拖动、min-height、max-height属性（还有bug，求修复）
+
+> ### v1.0.0
+> 依赖jquery，支持横向拖动、disabled、min-width、max-width属性
 
 
 # Example
@@ -73,20 +76,31 @@ export default {
   <drag-handle class="handle">H</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" :disabled="true">H</drag-handle>
   <div class="item i5">item5</div>
 </drag-zone>
 
 <!-- min width and max width -->
 <drag-zone class="zone">
-  <div class="item i1" style="min-width: 100px;max-width: 300px;">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"></drag-handle>
+  <div class="item i5">min 10em</div>
+</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" style="min-width: 50px;">min 50px</div>
-  <drag-handle class="handle" disabled>H</drag-handle>
-  <div class="item i5" style="min-width: 100px;">min 100px</div>
+  <div class="item i4">item4</div>
+  <drag-handle class="handle"></drag-handle>
+  <div class="item i5">item5</div>
 </drag-zone>
 ```
 

diff --git 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>Horizontal MinWdith and MaxWidth Example</span>
+        <span>Horizontal MinWidth and MaxWidth Example</span>
       </div>
       <md-button class="md-icon-button"
                  target="_blank"
@@ -19,7 +19,7 @@
         <drag-handle class="handle"></drag-handle>
         <div class="item i3">item3</div>
         <div class="item i4">min 50px</div>
-        <drag-handle class="handle" disabled></drag-handle>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i5">min 10em</div>
       </drag-zone>
     </md-card-media>

diff --git a/examples/04-example.vue b/examples/04-example.vue
@@ -2,25 +2,25 @@
   <md-card>
     <md-card-actions v-md-ink-ripple>
       <div class="md-subhead">
-        <span>Vertical Base Example</span>
+        <span>Vertical MinHeight and MaxHeight 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">
+                 href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/05-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>
+        <div class="item i1">min-height: 60px max-height: 20rem</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 i3">min-height: 70px</div>
         <div class="item i4">item4</div>
         <drag-handle class="handle"></drag-handle>
-        <div class="item i5">item5</div>
+        <div class="item i5">min-height: 5em</div>
       </drag-zone>
     </md-card-media>
   </md-card>
@@ -64,18 +64,22 @@
     justify-content: center;
   }
   .zone .item.i1 {
+    min-height: 60px;
+    max-height: 20rem;
     background: #999;
   }
   .zone .item.i2 {
     background: #777;
   }
   .zone .item.i3 {
+    min-height: 70px;
     background: #555;
   }
   .zone .item.i4 {
     background: #333;
   }
   .zone .item.i5 {
+    min-height: 5em;
     background: #000;
   }
 </style>
diff --git a/examples/05-example.vue b/examples/05-example.vue
@@ -2,24 +2,35 @@
   <md-card>
     <md-card-actions v-md-ink-ripple>
       <div class="md-subhead">
-        <span>Disabled Example</span>
+        <span>Vertical Nested 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">
+                 href="https://github.com/surmon-china/vue-drag-zone/tree/master/examples/06-example.vue">
         <md-icon>code</md-icon>
       </md-button>
     </md-card-actions>
     <md-card-media>
       <!-- drag-zone -->
-      <drag-zone class="zone">
+      <drag-zone class="vertical-zone" :options="{ direction: 'vertical' }">
         <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>
-        <div class="item i4">item4</div>
-        <drag-handle class="handle" :disabled="disabledHandle">H</drag-handle>
+        <drag-handle class="handle"></drag-handle>
+        <div class="item i4">
+        <drag-zone class="horizontal-zone">
+          <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"></drag-handle>
+          <div class="item i3">item3</div>
+          <div class="item i4">min 50px</div>
+          <drag-handle class="handle"></drag-handle>
+          <div class="item i5">min 10em</div>
+        </drag-zone>
+        </div>
+        <drag-handle class="handle"></drag-handle>
         <div class="item i5">item5</div>
       </drag-zone>
     </md-card-media>
@@ -30,22 +41,15 @@
   export default {
     data() {
       return {
-        disabledHandle: true
       }
-    },
-    mounted() {
-      setInterval(() => {
-        this.disabledHandle = !this.disabledHandle
-      }, 5000)
     }
   }
 </script>
 
 <style scoped>
-  .zone {
+  .vertical-zone {
     width: 100%;
     height: 500px;
-    line-height: 180px;
     margin: 0 auto;
     position: relative;
     clear: both;
@@ -54,30 +58,79 @@
     background: #eee;
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
   }
-  .zone .handle {
+  .vertical-zone >.handle {
+    width: 100%;
+    height: 10px;
+    background: #2196f3;
+  }
+  .vertical-zone >.item {
+    width: 100%;
+    height: calc((100% - 30px) / 4);
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .vertical-zone >.item.i1 {
+    background: #999;
+  }
+  .vertical-zone >.item.i2 {
+    background: #777;
+  }
+  .vertical-zone >.item.i3 {
+    background: #555;
+  }
+  .vertical-zone >.item.i4 {
+    background: #333;
+  }
+  .vertical-zone >.item.i5 {
+    background: #000;
+  }
+  .horizontal-zone {
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
+    clear: both;
+    text-align: center;
+    color: white;
+    background: #eee;
+    display: flex;
+    justify-content: space-between;
+  }
+  .horizontal-zone >.handle {
     width: 10px;
-    height: 180px;
+    height: 100%;
     background: #2196f3;
   }
-  .zone .item {
+  .horizontal-zone >.item {
     width: calc((100% - 30px) / 4);
-    height: 180px;
+    height: 100%;
     overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-  .zone .item.i1 {
+  .horizontal-zone >.item.i1 {
+    min-width: 100px;
+    max-width: 30rem;
     background: #999;
   }
-  .zone .item.i2 {
+  .horizontal-zone >.item.i2 {
     background: #777;
   }
-  .zone .item.i3 {
+  .horizontal-zone >.item.i3 {
     background: #555;
   }
-  .zone .item.i4 {
+  .horizontal-zone >.item.i4 {
+    min-width: 50px;
     background: #333;
   }
-  .zone .item.i5 {
+  .horizontal-zone >.item.i5 {
+    min-width: 10em;
     background: #000;
   }
 </style>
diff --git a/examples/index.js b/examples/index.js
@@ -2,14 +2,12 @@ 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'
+import example05 from './05-example.vue'
 
 module.exports = {
   example01,
   example02,
   example03,
   example04,
-  // example05,
-  // example06
+  example05
 }