fix: 解决Drag组件拖拽后会在原地留一个遮挡元素问题+解决weapp/taroh5多个demo拖拽位置不正确问题

irisSong · irisSong · commit 98fa4a033085 · 2024-06-06T20:25:36.000+08:00
diff --git a/src/packages/drag/demo.taro.tsx b/src/packages/drag/demo.taro.tsx
@@ -35,7 +35,7 @@ const DragDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo full ${isTaroWeb ? 'web' : ''}`}>
+      <div className={`demo ${isTaroWeb ? 'web' : 'full'}`}>
         <h2>{translated.basic}</h2>
         <Demo1 />
 
diff --git a/src/packages/drag/demos/taro/demo1.tsx b/src/packages/drag/demos/taro/demo1.tsx
@@ -3,7 +3,7 @@ import { Drag, Button } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <Drag style={{ left: '8px' }}>
+    <Drag style={{ left: '8px' }} className="drag-demo1">
       <Button type="primary">drag</Button>
     </Drag>
   )
diff --git a/src/packages/drag/demos/taro/demo2.tsx b/src/packages/drag/demos/taro/demo2.tsx
@@ -10,6 +10,7 @@ const Demo2 = () => {
           top: '200px',
           left: '8px',
         }}
+        className="drag-demo21"
       >
         <Button type="primary">X</Button>
       </Drag>
@@ -19,6 +20,7 @@ const Demo2 = () => {
           top: '200px',
           right: '50px',
         }}
+        className="drag-demo22"
       >
         <Button type="primary">Y</Button>
       </Drag>
diff --git a/src/packages/drag/demos/taro/demo3.tsx b/src/packages/drag/demos/taro/demo3.tsx
@@ -10,6 +10,7 @@ const Demo3 = () => {
         top: '275px',
         left: '0px',
       }}
+      className="drag-demo3"
     >
       <Button type="primary">attract</Button>
     </Drag>
diff --git a/src/packages/drag/demos/taro/demo4.tsx b/src/packages/drag/demos/taro/demo4.tsx
@@ -27,6 +27,7 @@ const Demo4 = () => {
         }}
       />
       <Drag
+        className="drag-demo4"
         boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}
         style={{ top: '400px', left: '50px' }}
       >
diff --git a/src/packages/drag/drag.scss b/src/packages/drag/drag.scss
@@ -1,10 +1,14 @@
 .nut-drag {
   position: fixed;
-  display: inline-flex;
   z-index: 9997 !important;
-  width: fit-content;
-  height: fit-content;
+  width: 0;
+  height: 0;
   touch-action: none;
   user-select: none;
   font-size: 0;
+  &-inner {
+    display: inline-flex;
+    width: fit-content;
+    height: fit-content;
+  }
 }
diff --git a/src/packages/drag/drag.taro.tsx b/src/packages/drag/drag.taro.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
 import { getSystemInfoSync, createSelectorQuery } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
 
 export interface DragProps extends BasicComponent {
   attract: boolean
@@ -45,20 +46,24 @@ export const Drag: FunctionComponent<
   const translateY = useRef(0)
   const middleLine = useRef(0)
 
-  const getInfo = () => {
+  const getInfo = async () => {
     const el = myDrag.current
     if (el) {
       const { top, left, bottom, right } = boundary
       const { screenWidth, windowHeight } = getSystemInfoSync()
 
+      const { width, height } = await getRectByTaro(dragRef.current)
+      dragRef.current && dragRef.current.getBoundingClientRect()
+
+      console.log('width', width, 'height', height)
       createSelectorQuery()
         .select(`.${className}`)
         .boundingClientRect((rec: any) => {
           setBoundaryState({
             top: -rec.top + top,
             left: -rec.left + left,
-            bottom: windowHeight - rec.height - rec.top - bottom,
-            right: screenWidth - rec.width - rec.left - right,
+            bottom: windowHeight - rec.top - bottom - Math.ceil(height),
+            right: screenWidth - rec.left - right - Math.ceil(width),
           })
 
           middleLine.current =
@@ -135,6 +140,7 @@ export const Drag: FunctionComponent<
       ref={myDrag}
     >
       <div
+        className={`${classPrefix}-inner`}
         onTouchStart={(event) => touchStart(event)}
         ref={dragRef}
         onTouchMove={touchMove}
diff --git a/src/packages/drag/drag.tsx b/src/packages/drag/drag.tsx
@@ -45,7 +45,10 @@ export const Drag: FunctionComponent<
   const getInfo = () => {
     const el = myDrag.current
     if (el) {
-      const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = el
+      const { offsetTop, offsetLeft } = el
+      const { offsetWidth, offsetHeight } = el.querySelector(
+        `.${classPrefix}-inner`
+      ) as HTMLDivElement
       const { clientWidth, clientHeight } = document.documentElement
       const { top, left, bottom, right } = boundary
       setBoundaryState({
@@ -94,7 +97,11 @@ export const Drag: FunctionComponent<
       {...reset}
       ref={myDrag}
     >
-      <animated.div style={currstyle} {...bind()}>
+      <animated.div
+        style={currstyle}
+        {...bind()}
+        className={`${classPrefix}-inner`}
+      >
         {children}
       </animated.div>
     </div>

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { Drag, Button } from '@nutui/nutui-react-taro'`
`3`	`3`
`4`	`4`	`const Demo1 = () => {`
`5`	`5`	`return (`
`6`		`- <Drag style={{ left: '8px' }}>`
	`6`	`+ <Drag style={{ left: '8px' }} className="drag-demo1">`
`7`	`7`	`<Button type="primary">drag</Button>`
`8`	`8`	`</Drag>`
`9`	`9`	`)`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ const Demo3 = () => {`
`10`	`10`	`top: '275px',`
`11`	`11`	`left: '0px',`
`12`	`12`	`}}`
	`13`	`+ className="drag-demo3"`
`13`	`14`	`>`
`14`	`15`	`<Button type="primary">attract</Button>`
`15`	`16`	`</Drag>`
Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@ const Demo4 = () => {`
`27`	`27`	`}}`
`28`	`28`	`/>`
`29`	`29`	`<Drag`
	`30`	`+ className="drag-demo4"`
`30`	`31`	`boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}`
`31`	`32`	`style={{ top: '400px', left: '50px' }}`
`32`	`33`	`>`