feat: 微调手势拖拽参数配置，统一配置参数名

bh-lay · bh-lay · commit 9cf78b1d678d · 2022-05-14T22:44:04.000+08:00
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=0">
   <meta name="keywords" content="前端,程序员,上网首页,起始页,工具,小组件"/>
   <meta name="description" content="前端上网首页，程序员摸鱼起始页，剧中人的个人上网首页。"/>
   <title>小剧起始页</title>
diff --git a/src/App.vue b/src/App.vue
@@ -125,18 +125,27 @@ textarea
 </template>
 
 <script lang="ts">
-import { ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import Gallery from '@/components/gallery.vue'
 import SearchEntrance from '@/components/search-entrance.vue'
 import BookmarkDesktop from '@/components/bookmark-desktop.vue'
 import Settings from '@/components/settings/index.vue'
 import LogoAbout from '@/components/logo-about/index.vue'
-
 import EasyRouter from '@/components/easy-router.vue'
+
 export default {
   components: { Gallery, SearchEntrance, BookmarkDesktop, LogoAbout, Settings, EasyRouter },
   setup() {
     const focused = ref(false)
+
+    // 阻止双指放大
+    function preventPageZoom(event: Event) {
+      event.preventDefault()
+    }
+    document.addEventListener('gesturestart', preventPageZoom)
+    onUnmounted(() => {
+      document.removeEventListener('gesturestart', preventPageZoom)
+    })
     return {
       focused,
     }
diff --git a/src/assets/ts/drag-handle.ts b/src/assets/ts/drag-handle.ts
@@ -13,9 +13,9 @@ export type dragOptions = {
   move: (a: dragParams) => void;
   end: (a: dragParams) => void;
   cancel?: () => void;
-  mouseStableDistance: number;
+  mouseStableDistance?: number;
   touchStableDistance?: number;
-  touchHoldTime?: number;
+  touchStableTime?: number;
 };
 export type dragParams = {
   clientX: number;
@@ -57,7 +57,7 @@ function getParamFromTouchEvent(event: TouchEvent, startX: number, startY: numbe
 }
 export function mouseDragHandle(originEvent: MouseEvent | TouchEvent, options?: dragOptions) {
   const event = originEvent as MouseEvent
-  const { beforeStart, start, move, end, cancel, mouseStableDistance } = options || {}
+  const { beforeStart, start, move, end, cancel, mouseStableDistance = 20 } = options || {}
   // 非左键不处理
   if (event.button !== 0) {
     cancel && cancel()
@@ -105,7 +105,7 @@ export function mouseDragHandle(originEvent: MouseEvent | TouchEvent, options?:
 
 export function touchDragHandle(originEvent: MouseEvent | TouchEvent, options?: dragOptions) {
   const event = originEvent as TouchEvent
-  const { beforeStart, start, move, end, cancel, touchHoldTime = 300, touchStableDistance = 50 } = options || {}
+  const { beforeStart, start, move, end, cancel, touchStableTime = 240, touchStableDistance = 20 } = options || {}
   const touches = event.touches || []
   const targetNode = event.target
   if (touches.length !== 1 || !targetNode) {
@@ -124,16 +124,15 @@ export function touchDragHandle(originEvent: MouseEvent | TouchEvent, options?:
     start && start(startX, startY)
     const param = getParamFromTouchEvent(event, startX, startY)
     move && move(param)
-  }, touchHoldTime)
+  }, touchStableTime)
   function touchMove(originEvent: Event) {
     const event = originEvent as TouchEvent
     const param = getParamFromTouchEvent(event, startX, startY)
-    if (!hasTriggerStartEvent && Math.sqrt(param.xOffset * param.xOffset + param.yOffset * param.yOffset) >
-    touchStableDistance) {
-      touchCancel()
-      return
-    }
     if (!hasTriggerStartEvent) {
+      const moveDistance = Math.sqrt(param.xOffset * param.xOffset + param.yOffset * param.yOffset)
+      if (moveDistance > touchStableDistance) {
+        touchCancel()
+      }
       return
     }
     event.stopPropagation && event.stopPropagation()
@@ -167,8 +166,9 @@ export function touchDragHandle(originEvent: MouseEvent | TouchEvent, options?:
   targetNode.addEventListener('touchcancel', touchCancel, listenerConfig)
 }
 
+export const supportTouch = 'ontouchend' in document
 export default function (event: MouseEvent | TouchEvent, options?: dragOptions) {
-  if ('ontouchend' in document) {
+  if (supportTouch) {
     touchDragHandle(event, options)
   } else {
     mouseDragHandle(event, options)
diff --git a/src/components/draged-layer.vue b/src/components/draged-layer.vue
@@ -21,9 +21,9 @@
   position absolute
   width 40px
   height 40px
-  margin -10px 0 0 -10px
+  transform translate(-50%, -50%)
   border-radius 4px
-  background #333
+  background #2196f3
   box-shadow 1px 1px 2px rgba(0, 0, 0, 0.2),2px 2px 20px rgba(0, 0, 0, 0.2)
 .trash-area
   position absolute
@@ -96,14 +96,20 @@
     transform scale(1.25)
     background #4d636f
     color #bac8cf
+.touch-mode
+  .draged-shadow
+    width 80px
+    height 80px
+    border-radius 20px
+    opacity .5
 </style>
 
 <template>
   <teleport to="#v-ui">
     <transition name="fade-fast">
       <div
         v-if="isStableStart"
-        class="draged-layer"
+        :class="['draged-layer', supportTouch ? 'touch-mode' : '']"
       >
         <div
           :class="{
@@ -151,6 +157,18 @@
             background: dragedBookmark.undercoat,
           }"
         />
+        <!-- <div
+          v-for="item in gridTestData"
+          :key="item.id"
+          :style="{
+            position: 'absolute',
+            top: item.top + 'px',
+            left: item.left + 'px',
+            width: (item.right - item.left) + 'px',
+            height: item.bottom - item.top + 'px',
+            border: '1px solid red',
+          }"
+        /> -->
       </div>
     </transition>
   </teleport>
@@ -159,7 +177,7 @@
 <script lang="ts">
 import { ref, getCurrentInstance, Ref, ComponentInternalInstance } from 'vue'
 import { getAppConfigItem } from '@/assets/ts/app-config'
-import dragHandle from '@/assets/ts/drag-handle'
+import dragHandle, { supportTouch } from '@/assets/ts/drag-handle'
 import { Bookmark, BookmarkSize } from '@database/entity/bookmark'
 type mapItem = {
   id: string,
@@ -328,6 +346,7 @@ export default {
     const isStableStart = ref(false)
     const clientX = ref(0)
     const clientY = ref(0)
+    // const gridTestData: Ref<mapItem[]> = ref([])
     const gridGap = getAppConfigItem('gridGap') as number
     const shadowRectStyle = ref({
       top: '',
@@ -341,12 +360,11 @@ export default {
     let itemSizeAndPositionMap: mapItem[] = []
 
     dragHandle(props.event, {
-      mouseStableDistance: 20,
       start() {
         context.emit('beforeDrag')
         isStableStart.value = true
         itemSizeAndPositionMap = getItemListMap(internalInstance)
-        // console.log('itemSizeAndPositionMap', itemSizeAndPositionMap)
+        // gridTestData.value = itemSizeAndPositionMap
       },
       move(params) {
         const triggered = getMouseTriggered(
@@ -450,6 +468,8 @@ export default {
       },
     })
     return {
+      // gridTestData,
+      supportTouch,
       clientX,
       clientY,
       isStableStart,
diff --git a/src/components/private-bookmarks/main-draged-layer.vue b/src/components/private-bookmarks/main-draged-layer.vue
@@ -247,7 +247,6 @@ export default {
     let sideRectList: mapItem[] = []
 
     dragHandle(props.event, {
-      mouseStableDistance: 20,
       start() {
         context.emit('beforeDrag')
         isStableStart.value = true
diff --git a/src/ui-lib/components/v-slider.vue b/src/ui-lib/components/v-slider.vue
@@ -195,7 +195,6 @@ export default {
     }
 
     const dragOption: dragOptions = {
-      mouseStableDistance: 20,
       beforeStart() {
         const trackNode = trackRef.value
         if (trackNode === null) {
diff --git a/src/ui-lib/directives/drag.ts b/src/ui-lib/directives/drag.ts
@@ -1,13 +1,13 @@
 import { App as Application }  from 'vue'
-import { mouseDragHandle, touchDragHandle } from '@/assets/ts/drag-handle'
+import { supportTouch, mouseDragHandle, touchDragHandle } from '@/assets/ts/drag-handle'
 
 export default {
   install(app: Application) {
     app.directive('drag', {
       mounted (el: HTMLElement, binding) {
         const bindingValue = typeof binding.value === 'object' ? binding.value : {}
         const triggerElement = el
-        if ('ontouchend' in document) {
+        if (supportTouch) {
           triggerElement.addEventListener('touchstart', (event: TouchEvent) => {
             touchDragHandle(event, bindingValue)
           })
@@ -21,7 +21,7 @@ export default {
     app.directive('drag-start', {
       mounted (el: HTMLElement, binding) {
         const triggerElement = el
-        if ('ontouchend' in document) {
+        if (supportTouch) {
           triggerElement.addEventListener('touchstart', (event: TouchEvent) => {
             if (typeof binding.value === 'function') {
               binding.value(event)

Original file line number	Diff line number	Diff line change
`@@ -195,7 +195,6 @@ export default {`
`195`	`195`	`}`
`196`	`196`
`197`	`197`	`const dragOption: dragOptions = {`
`198`		`- mouseStableDistance: 20,`
`199`	`198`	`beforeStart() {`
`200`	`199`	`const trackNode = trackRef.value`
`201`	`200`	`if (trackNode === null) {`