fix(Drag): 修复拖拽表现异常 (#1716)

src/packages/__VUE/drag/index.taro.vue

@@ -2,6 +2,7 @@
   <view
     :class="classes"
     ref="myDrag"
+    :id="'drag-' + refRandomId"
     class="myDrag"
     @touchstart="touchStart($event)"
     @touchmove.prevent="touchMove($event)"
@@ -46,6 +47,8 @@ export default create({
   },
   setup(props, { emit }) {
     const myDrag = ref();
+    const refRandomId = Math.random().toString(36).slice(-8);
+
     const state: any = reactive({
       keepAlive: false,
       elWidth: 0,
@@ -55,6 +58,7 @@ export default create({
       startTop: 0,
       startLeft: 0,
       initTop: 0,
+      initLeft: 0,
       nx: 0,
       ny: 0,
       xPum: 0,
@@ -80,11 +84,12 @@ export default create({
     function getInfo() {
       const query = Taro.createSelectorQuery();
       query
-        .select('.myDrag')
+        .select('#drag-' + refRandomId)
         .boundingClientRect((rec: any) => {
           state.elWidth = rec.width;
           state.elHeight = rec.height;
           state.initTop = rec.top;
+          state.initLeft = rec.left;
         })
         .exec();
       // console.log(domElem.windowWidth);
@@ -136,15 +141,16 @@ export default create({
         state.yPum = state.startTop + state.ny;
 
         const rightLocation = state.screenWidth - state.elWidth - state.boundary.right;
-        if (Math.abs(state.xPum) > rightLocation) {
-          state.xPum = rightLocation;
-        } else if (state.xPum <= state.boundary.left) {
-          state.xPum = state.boundary.left;
+        if (Math.abs(state.xPum + state.initLeft) > rightLocation) {
+          state.xPum = rightLocation - state.initLeft;
+        } else if (state.xPum + state.initLeft <= state.boundary.left) {
+          state.xPum = state.boundary.left - state.initLeft;
         }
-        if (state.yPum < state.boundary.top) {
-          state.yPum = state.boundary.top;
-        } else if (state.yPum > state.screenHeight - state.elHeight - state.boundary.bottom) {
-          state.yPum = state.screenHeight - state.elHeight - state.boundary.bottom;
+
+        if (state.yPum + state.initTop < state.boundary.top) {
+          state.yPum = state.boundary.top - state.initTop;
+        } else if (state.yPum + state.initTop > state.screenHeight - state.elHeight - state.boundary.bottom) {
+          state.yPum = state.screenHeight - state.elHeight - state.boundary.bottom - state.initTop;
         }
 
         if (props.direction != 'y') {
@@ -235,7 +241,8 @@ export default create({
       touchStart,
       touchMove,
       touchEnd,
-      state
+      state,
+      refRandomId
     };
   }
 });