Merge pull request #40 from ileenhow/dev

fix target stucks when drag back to start point

src/components/core/directives/drag.js

@@ -5,6 +5,7 @@ export default {
   name: 'drag',
   bind (el, { value, modifiers }) {
     let startPoint = null
+    let direction
     el.addEventListener('touchstart', e => {
       startPoint = null
       if (e.touches && e.touches.length === 1) {
@@ -16,20 +17,27 @@ export default {
       }
     })
     el.addEventListener('touchmove', e => {
-      if (startPoint) {
-        if (modifiers.direction) {
-          if ((value.horizontal && isHorizontal(e.touches[0], startPoint)) ||
-              (value.vertical && isVertical(e.touches[0], startPoint))) {
-            el.dispatchEvent(createEvent('drag', { originalEvent: e }))
-          } else {
-            startPoint = null
-          }
-        } else {
-          el.dispatchEvent(createEvent('drag', { originalEvent: e }))
-        }
+      if (!startPoint) {
+        return
+      }
+
+      // set drag direction's value after touchstart
+      // and never change it until touchend
+      if (!direction) {
+        direction = isHorizontal(e.touches[0], startPoint) ? 'horizontal' : 'vertical'
       }
+
+      // don't dispatch drag event when modifiers don't match drag direction
+      if ((modifiers.horizontal && !modifiers.vertical && direction === 'vertical') ||
+          (modifiers.vertical && !modifiers.horizontal && direction === 'horizontal')) {
+        return
+      }
+      el.dispatchEvent(createEvent('drag', { originalEvent: e }))
     })
     el.addEventListener('touchend', e => {
+      if (direction) {
+        direction = null
+      }
       if (startPoint) {
         startPoint = null
         el.dispatchEvent(createEvent('dragend', { originalEvent: e }))

src/components/core/picker.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="c-picker"
     :style="{height: itemHeight * size + 'px'}"
-    v-drag.direction="{vertical: 'yes'}"
+    v-drag.vertical
     @dragstart="dragstart"
     @drag="drag"
     @dragend="dragend">
@@ -11,7 +11,7 @@
       <div class="c-picker-highlight"
         :style="{height: itemHeight + 'px', transform: 'translate3d(0, ' + ((size - 1) / 2 * itemHeight) + 'px, 0)'}"></div>
     </div>
-    <div class="c-picker-content" :class="{transition: transition}"
+    <div class="c-picker-content" :class="{ transition: transition && !dragging }"
       :style="{transform: 'translate3d(0, ' + offset + 'px, 0)'}"
       ref="content"><slot></slot></div>
   </div>
@@ -47,7 +47,9 @@ export default {
       offset: 0,
       itemHeight: 0,
       // 是否有内容
-      itemLength: 0
+      itemLength: 0,
+      // when picker is dragging, remove transition effect for preventing lag
+      dragging: false
     }
   },
 
@@ -103,6 +105,7 @@ export default {
     },
     dragstart ({ originalEvent: e }) {
       this.startY = e.touches[0].pageY - this.offset
+      this.dragging = true
     },
     drag ({ originalEvent: e }) {
       // prevent scroll
@@ -111,6 +114,7 @@ export default {
       this.offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageY - this.startY))
     },
     dragend ({ originalEvent: e }) {
+      this.dragging = false
       const offsetIndex = Math.max((this.size - 1) / 2 - this.itemLength, Math.round(this.offset / this.itemHeight))
       this.offset = this.itemHeight * offsetIndex
       const index = (this.size - 1) / 2 - offsetIndex

src/components/core/range.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-range"
     :class="{disabled: disabled}"
-    v-drag.direction="{horizontal: 'yes'}"
+    v-drag.horizontal
     @dragstart="dragstart"
     @drag="drag">
     <div class="c-range-content"

src/components/core/scroller.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-scroller"
     :style="{height: height + 'px'}"
-    v-drag.direction="{vertical: 'yes'}"
+    v-drag.vertical
     @dragstart="dragstart"
     @drag="drag"
     @dragend="dragend">

src/components/core/slider.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="c-slider"
-    v-drag.direction="{horizontal: 'yes'}"
+    v-drag.horizontal
     @dragstart="dragstart"
     @drag="drag"
     @dragend="dragend">

src/components/core/swiper.vue

@@ -2,7 +2,7 @@
   <div class="c-swiper"
     :class="{transition: transition}"
     :style="{transform: 'translate3d(' + offset + 'px, 0, 0)'}"
-    v-drag.direction="{horizontal: 'yes'}"
+    v-drag.horizontal
     @dragstart="dragstart"
     @drag="drag"
     @dragend="dragend"