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

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

* fix: 更新单元测试+移除log

src/packages/drag/__test__/__snapshots__/drag.spec.tsx.snap

@@ -11,6 +11,7 @@ exports[`Drag > should render default slot correctly 1`] = `
 
 exports[`Drag > touch move 1`] = `
 <div
+  class="nut-drag-inner"
   style="transform: none;"
 >
   <span

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 />
 

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>
   )

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>

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>

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' }}
       >

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;
+  }
 }

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,22 @@ 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?.getBoundingClientRect()
       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 +138,7 @@ export const Drag: FunctionComponent<
       ref={myDrag}
     >
       <div
+        className={`${classPrefix}-inner`}
         onTouchStart={(event) => touchStart(event)}
         ref={dragRef}
         onTouchMove={touchMove}

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>