@dolphinweex/weex-harmony 0.1.26 → 0.1.27

package/src/components/midea-scene-card-drag-list-view.vue

@@ -4,113 +4,107 @@
     :class="{ editMode: data.isEditing }"
     :style="gridItemStyle"
   >
-      <div class="grid-items-wrapper">
-        <transition-group name="grid-fade" tag="div"  class="grid-inner-wrapper">
+    <div class="grid-items-wrapper">
+      <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
+        <div
+          v-for="(item, index) in processedList"
+          :key="item.itemView.id"
+          class="grid-item"
+          :class="{
+            'being-dragged': draggingIndex === index,
+            hidden: isDragClone && draggingIndex === index,
+            'hover-target': hoverIndex === index && draggingIndex !== index,
+            'disabled-item': item.itemView.enable === false,
+          }"
+          :style="{
+            overflow: data.isEditing ? 'visible' : 'hidden',
+          }"
+          @touchstart="(event) => startLongPress(event, index)"
+          @touchmove="checkLongPressMove"
+          @touchend="endTouch"
+          @touchcancel="endTouch"
+          :data-index="index"
+        >
           <div
-            v-for="(item, index) in processedList"
-            :key="item.itemView.id"
-            class="grid-item"
-            :class="{
-              'being-dragged': draggingIndex === index,
-              hidden: isDragClone && draggingIndex === index,
-              'hover-target': hoverIndex === index && draggingIndex !== index,
-              'disabled-item': item.itemView.enable === false,
-            }"
-            :style="{
-              overflow: data.isEditing ? 'visible' : 'hidden',
-            }"
-            :data-index="index"
-            @touchstart="(event) => startLongPress(event, index)"
-            @touchmove="checkLongPressMove"
-            @touchend="endTouch"
-            @touchcancel="endTouch"
+            v-if="item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing"
+            class="lottie-container bg-anim"
+            :style="applyNormalAttribute(item.bgAnimView)"
+            :ref="`bgAnim-${item.itemView.id}`"
+          ></div>
+          <div
+            v-if="
+              item.frontAnimView &&
+              item.frontAnimView.animUrl &&
+              !data.isEditing
+            "
+            class="lottie-container front-anim"
+            :style="applyNormalAttribute(item.frontAnimView)"
+            :ref="`frontAnim-${item.itemView.id}`"
+          ></div>
+          <div
+            :style="applyNormalAttribute(item.itemView)"
+            class="grid-box"
+            :class="{ shaking: data.isEditing }"
+            @click.stop="(e) => itemViewClick(e, item, index)"
+
           >
-            <div
-              v-if="
-                item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing
-              "
-              class="lottie-container bg-anim"
-              :style="applyNormalAttribute(item.bgAnimView)"
-              :ref="`bgAnim-${item.itemView.id}`"
-            ></div>
-            <div
-              v-if="
-                item.frontAnimView &&
-                item.frontAnimView.animUrl &&
-                !data.isEditing
-              "
-              class="lottie-container front-anim"
-              :style="applyNormalAttribute(item.frontAnimView)"
-              :ref="`frontAnim-${item.itemView.id}`"
-            ></div>
-            <div
-              :style="applyNormalAttribute(item.itemView)"
-              class="grid-box"
-              :class="{ shaking: data.isEditing }"
-              @click.stop="(e) => itemViewClick(e, item, index)"
-            >
-              <div class="flexBox">
-                <img
-                  :src="item.iconImage.url"
-                  :style="applyNormalAttribute(item.iconImage)"
-                />
-                <div>
-                  <div @click.stop.prevent v-if="!data.isEditing">
-                    <button
-                      class="actionButton"
-                      @click.stop.prevent="(e) => actionClick(e, item, index)"
-                      :style="applyNormalAttribute(item.actionButton)"
-                    >
-                      {{ item.actionButton.text }}
-                    </button>
-                    <div
-                      v-if="
-                        item.loadingAnimView && item.loadingAnimView.animUrl
-                      "
-                      class="loading-anim"
-                      :style="applyNormalAttribute(item.loadingAnimView)"
-                      :ref="`loadingAnim-${item.itemView.id}`"
-                    ></div>
-                  </div>
-                  <div @click.stop.prevent v-if="!data.isEditing">
-                    <img
-                      :src="item.rightIcon.url"
-                      :style="applyNormalAttribute(item.rightIcon)"
-                      @click.stop.prevent="(e) => rightIconClick(e)"
-                    />
-                  </div>
-                  <div @click.stop.prevent v-if="!data.isEditing">
-                    <img
-                      class="leftTopIcon"
-                      :src="item.leftTopIcon.url"
-                      :style="applyNormalAttribute(item.leftTopIcon)"
-                      @click.stop.prevent
-                    />
-                  </div>
-                  <div @click.stop.prevent v-if="data.isEditing">
-                    <img
-                      class="isSelected"
-                      @click.stop.prevent="
-                        (e) => selectIconClick(e, item, index)
-                      "
-                      :src="
-                        item.itemView.isSelected
-                          ? item.selectIcon.selectedUrl
-                          : item.selectIcon.url
-                      "
-                      :style="applyNormalAttribute(item.selectIcon)"
-                    />
-                  </div>
+            <div class="flexBox">
+              <img
+                :src="item.iconImage.url"
+                :style="applyNormalAttribute(item.iconImage)"
+              />
+              <div>
+                <div @click.stop.prevent v-if="!data.isEditing">
+                  <button
+                    class="actionButton"
+                    @click.stop.prevent="(e) => actionClick(e, item, index)"
+                    :style="applyNormalAttribute(item.actionButton)"
+                  >
+                    {{ item.actionButton.text }}
+                  </button>
+                  <div
+                    v-if="item.loadingAnimView && item.loadingAnimView.animUrl"
+                    class="loading-anim"
+                    :style="applyNormalAttribute(item.loadingAnimView)"
+                    :ref="`loadingAnim-${item.itemView.id}`"
+                  ></div>
+                </div>
+                <div @click.stop.prevent v-if="!data.isEditing">
+                  <img
+                    :src="item.rightIcon.url"
+                    :style="applyNormalAttribute(item.rightIcon)"
+                    @click.stop.prevent="(e) => rightIconClick(e)"
+                  />
+                </div>
+                <div @click.stop.prevent v-if="!data.isEditing">
+                  <img
+                    class="leftTopIcon"
+                    :src="item.leftTopIcon.url"
+                    :style="applyNormalAttribute(item.leftTopIcon)"
+                    @click.stop.prevent
+                  />
+                </div>
+                <div @click.stop.prevent v-if="data.isEditing">
+                  <img
+                    class="isSelected"
+                    @click.stop.prevent="(e) => selectIconClick(e, item, index)"
+                    :src="
+                      item.itemView.isSelected
+                        ? item.selectIcon.selectedUrl
+                        : item.selectIcon.url
+                    "
+                    :style="applyNormalAttribute(item.selectIcon)"
+                  />
                 </div>
               </div>
-              <div class="itemText" :style="[applyNormalAttribute(item.text)]">
-                {{ item.text.text }}
-              </div>
+            </div>
+            <div class="itemText" :style="[applyNormalAttribute(item.text)]">
+              {{ item.text.text }}
             </div>
           </div>
-        </transition-group>
-      </div>
-
+        </div>
+      </transition-group>
+    </div>
 
     <!-- 拖拽克隆元素 -->
     <div v-if="isDragClone" class="drag-clone" :style="dragCloneStyle">
@@ -175,7 +169,7 @@ export default {
       processedList: [],
       selected: null,
       longPressTimer: null,
-      longPressDuration: 350,
+      longPressDuration: 400, // 略微延长长按时间，减少误触发
       longPressStartIndex: null,
       draggingIndex: null,
       hoverIndex: null,
@@ -184,6 +178,7 @@ export default {
       isAnimating: false,
       touchStartX: 0,
       touchStartY: 0,
+      touchStartTime: 0, // 记录触摸开始时间，用于计算滑动速度
       draggedItemRect: null,
       isDragClone: false,
       dragCloneX: 0,
@@ -193,7 +188,7 @@ export default {
       gridBoxWidth: 0,
       lottieAnimations: {},
       isScrolling: false,
-      scrollThreshold: 5,
+      scrollThreshold: 8, // 增大滚动检测阈值
       fixedItemWidth: 0,
       fixedItemHeight: 0,
       animationFrameId: null,
@@ -211,7 +206,9 @@ export default {
       return {
         '--grid-cols': this.data.spanCount || this.cols,
         '--grid-gap': `${this.data.spaceSize || 8}px`,
-        '--grid-margin': `${(this.data.layoutConfig.marginStart ) + (this.data.layoutConfig.marginEnd )}px`,
+        '--grid-margin': `${
+          this.data.layoutConfig.marginStart + this.data.layoutConfig.marginEnd
+        }px`,
         marginTop: this.data.layoutConfig.marginTop * scla,
         marginBottom: this.data.layoutConfig.marginBottom * scla,
         marginLeft: this.data.layoutConfig.marginStart * scla,
@@ -246,148 +243,75 @@ export default {
     },
   },
   methods: {
-    searchDom(){
-      //在 slider组件内部时 阻止默认行为和冒泡都无法在长按的时候 阻止其滚动行为 只能查找去禁止
-      const currentEl = this.$el;
-      let parentEl = currentEl.parentElement;
-      let searchDepth = 0; // 搜索深度计数器
-      while (parentEl && !parentEl.classList.contains('weex-list-inner') && searchDepth < 5) {
-        parentEl = parentEl.parentElement;
-        searchDepth++; 
-      }
-      
-      if (parentEl) {
-        this.weexListInnerEl = parentEl;
-        this.originListInnerStyle = parentEl.style.touchAction || '';
-        
-        // 在weex-list-inner中查找weex-refresh子元素
-        const refreshEl = parentEl.querySelector('.weex-refresh');
-        if (refreshEl) {
-          this.weexRefreshEl = refreshEl;
-          this.originRefreshStyle = refreshEl.style.height || '';
-        }
-      }
-    },
     updateListItem(data) {
       console.log('updateListItem收到数据:', JSON.stringify(data));
       const id = data.itemView.id;
       const index = this.processedList.findIndex(
-        (item) => item.itemView.id === id
+        (item) => item.itemView.id == id
       );
       const dataIndex = this.data.list.findIndex(
-        (item) => item.itemView.id === id
+        (item) => item.itemView.id == id
       );
       // 更新原始数据以确保watch能触发
-      if (dataIndex !== -1) {
+      if(dataIndex !== -1) {
         // 使用Vue的$set确保响应式更新
         this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
       }
       if (index === -1) {
         return;
       }
-
-    
-
-      // 检查是否有动画URL的变化
-      const oldBgAnimUrl = this.processedList[index].bgAnimView.animUrl || '';
-      const oldLoadingAnimUrl =
-        this.processedList[index].loadingAnimView.animUrl || '';
-      const oldFrontAnimUrl =
-        this.processedList[index].frontAnimView.animUrl || '';
       const newBgAnimUrl = data.bgAnimView.animUrl || '';
       const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
       const newFrontAnimUrl = data.frontAnimView.animUrl || '';
-
-      const hasAnimUrlChanged =
-        oldBgAnimUrl !== newBgAnimUrl ||
-        oldLoadingAnimUrl !== newLoadingAnimUrl ||
-        oldFrontAnimUrl !== newFrontAnimUrl;
-
       // 同时更新processedList和原始data.list数据
       this.processedList[index] = data;
       this.processedList = [...this.processedList];
 
-      // 更新原始数据以确保watch能触发
-      if (dataIndex !== -1) {
-        // 使用Vue的$set确保响应式更新
-        this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
-      }
-
-      // 如果动画URL有变化，重新初始化相关的Lottie动画
-      if (hasAnimUrlChanged) {
 
-        // 等待下一帧DOM更新完成后再操作
-        this.$nextTick(() => {
-          // 清理旧的动画实例
-          const itemId = data.itemView.id;
-
-          // 清除所有相关的动画实例
-          const animKeys = [
+      // 无论是否有URL变化，都处理动画更新
+      // 这样确保任何visibility或其他属性变化也能被处理
+      this.$nextTick(() => {
+        // 清理旧的动画实例
+        const itemId = String(data.itemView.id);
+        // 加载背景动画
+        if (newBgAnimUrl) {
+          this.loadLottieAnimation(
+            data.bgAnimView,
+            `bgAnim-${itemId}`,
             `bg-${itemId}`,
+            data,
+            dataIndex
+          );
+        }
+        if (newLoadingAnimUrl) {
+          this.loadLottieAnimation(
+            data.loadingAnimView,
+            `loadingAnim-${itemId}`,
             `loading-${itemId}`,
+            data,
+            dataIndex
+          );
+        }
+        if (newFrontAnimUrl) {
+          this.loadLottieAnimation(
+            data.frontAnimView,
+            `frontAnim-${itemId}`,
             `front-${itemId}`,
-          ];
-          animKeys.forEach((key) => {
-            if (this.lottieAnimations[key]) {
-              const anim = this.lottieAnimations[key];
-              try {
-                anim.removeEventListener('complete');
-                anim.removeEventListener('DOMLoaded');
-                anim.removeEventListener('data_ready');
-                anim.removeEventListener('loaded_images');
-                anim.removeEventListener('loopComplete');
-              } catch (e) {
-              }
-              anim.destroy();
-              delete this.lottieAnimations[key];
-            }
-          });
-
-
-          // 延迟一点时间确保DOM完全更新
-          setTimeout(() => {
-            // 重新初始化背景动画
-            if (newBgAnimUrl) {
-              this.loadLottieAnimation(
-                data.bgAnimView,
-                `bgAnim-${itemId}`,
-                `bg-${itemId}`,
-                data
-              );
-            }
-
-            // 重新初始化加载动画
-            if (newLoadingAnimUrl) {
-              this.loadLottieAnimation(
-                data.loadingAnimView,
-                `loadingAnim-${itemId}`,
-                `loading-${itemId}`,
-                data
-              );
-            }
-
-            // 重新初始化前景动画
-            if (newFrontAnimUrl) {
-              this.loadLottieAnimation(
-                data.frontAnimView,
-                `frontAnim-${itemId}`,
-                `front-${itemId}`,
-                data
-              );
-            }
-          }, 100); // 增加延迟确保DOM已更新和旧动画已完全销毁
-        });
-      }
+            data,
+            dataIndex
+          );
+        }
+      });
     },
     getListData(callback) {
       let data = Array.from(this.processedList);
-      data = data.map((item)=>({
+      data = data.map((item) => ({
         ...item,
         itemView: {
           ...item.itemView,
-          id:String(item.itemView.id)
-        }
-      }))
+          id: String(item.itemView.id),
+        },
+      }));
       callback({ listData: data });
     },
     rightIconClick(e) {
@@ -413,7 +337,7 @@ export default {
         ...e,
       };
       this.$emit('onClickSelectIcon', target);
-      this.$emit('onSelectItems',target)
+      this.$emit('onSelectItems', target);
       return false;
     },
 
@@ -428,7 +352,7 @@ export default {
       this.cancelLongPress();
       if (this.data.isEditing) {
         item.itemView.isSelected = !item.itemView.isSelected;
-        this.$emit('onSelectItems',target)
+        this.$emit('onSelectItems', target);
         return;
       }
       const target = {
@@ -443,10 +367,6 @@ export default {
     actionClick(e, item, index) {
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
-
-      // 在触发事件前，先清理所有其他项目的动画实例
-      this.cleanupOtherAnimations(item.itemView.id);
-
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -457,51 +377,6 @@ export default {
       return false;
     },
 
-    // 新增方法：清理除指定项目外的所有动画实例
-    cleanupOtherAnimations(currentItemId) {
-
-      // 遍历所有动画实例
-      Object.keys(this.lottieAnimations).forEach((key) => {
-        // 检查是否为其他项目的动画
-        if (!key.includes(`-${currentItemId}`)) {
-          if (this.lottieAnimations[key]) {
-            const anim = this.lottieAnimations[key];
-
-            // 移除所有事件监听器
-            try {
-              anim.removeEventListener('complete');
-              anim.removeEventListener('DOMLoaded');
-              anim.removeEventListener('data_ready');
-              anim.removeEventListener('loaded_images');
-              anim.removeEventListener('loopComplete');
-            } catch (e) {
-              console.warn(`移除事件监听器失败: ${e.message}`);
-            }
-
-            anim.destroy();
-            delete this.lottieAnimations[key];
-
-            // 提取项目ID和动画类型
-            const parts = key.split('-');
-            if (parts.length === 2) {
-              const animType = parts[0]; // bg, loading, front
-              const itemId = parts[1];
-
-              // 隐藏对应的动画容器
-              this.$nextTick(() => {
-                const refName = `${animType}Anim-${itemId}`;
-                const animContainer =
-                  this.$refs[refName] && this.$refs[refName][0];
-                if (animContainer) {
-                  animContainer.style.display = 'none';
-                }
-              });
-            }
-          }
-        }
-      });
-    },
-
     // 生成处理后的数据列表
     generateDataList() {
       if (!this.data || !this.data.list || !this.data.globalData) {
@@ -601,12 +476,17 @@ export default {
     },
     // 开始长按
     startLongPress(e, index) {
+      console.log(e, 'cdj-------startLongPress');
       if (!this.data.isEditable) {
         return;
       }
-      this.$emit('onDragEventStart', e);
+
+      // 确保事件不被其他处理器抢先处理
+      // e.oriEvent.stopPropagation();
+
       // 清除任何现有计时器
       this.cancelLongPress();
+
       // 记录起始触摸位置和索引
       const touch = e.changedTouches[0];
       this.touchStartX = touch.pageX;
@@ -614,13 +494,8 @@ export default {
       this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
-      // 注意：不在这里阻止默认行为，允许滚动
-      document.removeEventListener('touchmove', this.onTouchMove, {
-        passive: true, // 设置为passive:true允许浏览器进行滚动优化
-      });
-      document.removeEventListener('touchend', this.onTouchEnd, {
-        passive: true,
-      });
+      // 记录触摸开始时间，用于判断是否为快速滑动
+      this.touchStartTime = Date.now();
 
       if (this.isTouchDragging) {
         this.$emit('drag-end', {
@@ -628,15 +503,19 @@ export default {
         });
       }
 
+      // 通知外部触摸开始事件
+      this.$emit('onDragEventStart', e);
 
-      // 设置新的长按计时器
+      // 设置新的长按计时器 - 延长一点时间避免误触发
       this.longPressTimer = setTimeout(() => {
         // 只有在没有滚动的情况下才激活拖拽模式
         if (!this.isScrolling) {
+          console.log('长按时间到，激活拖拽模式');
           this.activateDragMode(index);
+        } else {
+          console.log('检测到滚动，取消拖拽激活');
         }
       }, this.longPressDuration);
-      // 不阻止默认行为 - 允许滚动
     },
 
     // 检查长按过程中的移动
@@ -644,47 +523,66 @@ export default {
       if (!this.data.isEditable) {
         return;
       }
+
       const touch = e.changedTouches[0];
       // 如果已经在拖拽模式，交给onTouchMove处理
       if (this.isTouchDragging) {
         this.onTouchMove(e);
         return;
       }
+
       const moveX = Math.abs(touch.pageX - this.touchStartX);
       const moveY = Math.abs(touch.pageY - this.touchStartY);
 
-      // 检测是否在滚动
-      if (moveY > this.scrollThreshold * 3) {
-        // 增加滚动阈值以更容易识别滚动意图
+      // 计算触摸移动速度 (像素/毫秒)
+      const currentTime = Date.now();
+      const timeDiff = currentTime - this.touchStartTime;
+      const speedY = moveY / Math.max(1, timeDiff); // 垂直滑动速度
+
+      // 速度检测：快速滑动可能表示滚动意图
+      const isQuickSwipe = speedY > 0.5; // 如果垂直滑动速度大于0.5px/ms，判定为快速滑动
+
+      // 更敏感地检测滚动意图
+      // 1. 垂直移动显著大于水平移动
+      // 2. 垂直移动超过阈值的两倍
+      // 3. 快速垂直滑动
+      if (
+        (moveY > moveX * 1.2 && moveY > this.scrollThreshold) ||
+        moveY > this.scrollThreshold * 2 ||
+        (isQuickSwipe && moveY > this.scrollThreshold)
+      ) {
+        console.log('检测到滚动意图，取消长按', { moveY, moveX, speedY });
         this.isScrolling = true;
         this.cancelLongPress();
         return;
       }
 
-      // 如果移动超过阈值，取消长按
+      // 如果移动超过阈值，取消长按 - 但不阻止默认行为
       if (moveX > this.scrollThreshold || moveY > this.scrollThreshold) {
         this.cancelLongPress();
+        return;
       }
-      this.data.isEditing && e.oriEvent.stopPropagation()
-      this.data.isEditing && e.oriEvent.preventDefault()
 
+      // 只有确认不是滚动意图，且在长按倒计时中，才阻止默认行为
+      if (this.longPressTimer && !this.isScrolling) {
+        e.oriEvent.preventDefault();
+      }
     },
 
     // 激活拖拽模式
     activateDragMode(index) {
       console.log('长按触发，进入编辑模式');
-      // 此时添加阻止默认行为的事件监听，但只影响拖拽状态下的行为
-      document.addEventListener('touchmove', this.onTouchMove, {
-        passive: false, // 只有在拖拽模式下才阻止默认行为
-      });
-      document.addEventListener('touchend', this.onTouchEnd, {
-        passive: true,
-      });
-      if (this.data.isEditing) {
+
+      // 先确保编辑模式已开启
+      if (!this.data.isEditing) {
+        // 设置编辑状态并隐藏weex-refresh
+        this.data.isEditing = true;
+        this.$emit('onEditStateChanged', true);
+      } else {
+        // 无论之前是否处于编辑模式，都设置拖拽状态
         // 设置当前拖拽索引
         this.draggingIndex = index;
         this.isTouchDragging = true;
-
         // 使用存储的固定宽高
         this.draggedItemRect = {
           width: this.fixedItemWidth,
@@ -706,6 +604,20 @@ export default {
           // 显示拖拽克隆
           this.isDragClone = true;
 
+          // 禁止页面滚动
+          document.body.style.overflow = 'hidden';
+          document.body.style.touchAction = 'none';
+
+          // 添加全局触摸事件处理，确保捕获所有触摸事件
+          document.addEventListener('touchmove', this.onGlobalTouchMove, {
+            passive: false,
+            capture: true,
+          });
+          document.addEventListener('touchend', this.onTouchEnd, {
+            passive: false,
+            capture: true,
+          });
+
           // 立即执行一次定位以确保初始位置准确
           requestAnimationFrame(() => {
             this.dragCloneX = this.touchStartX - this.touchOffsetX;
@@ -714,16 +626,9 @@ export default {
 
           console.log('拖拽克隆已创建');
         }
-
-        this.longPressTimer = null;
-      }
-        // 进入编辑模式
-        if (!this.data.isEditing) {
-        // 设置编辑状态并隐藏weex-refresh
-        this.data.isEditing = true;
-        this.$emit('onEditStateChanged', true);
-        this.applyDragModeStyles(); // 应用编辑模式样式（隐藏refresh）
       }
+
+      this.longPressTimer = null;
     },
 
     // 取消长按计时器
@@ -733,12 +638,45 @@ export default {
         this.longPressTimer = null;
       }
       this.longPressStartIndex = null;
+
+      // 确保不再阻止滚动
+      if (this.isScrolling) {
+        // 如果已经确定为滚动意图，应该立即恢复系统默认滚动行为
+        document.body.style.overflow = '';
+        document.body.style.touchAction = '';
+      }
+    },
+
+    // 全局触摸移动处理 - 捕获阶段拦截所有触摸移动
+    onGlobalTouchMove(e) {
+      if (this.isTouchDragging) {
+        // 在捕获阶段强制阻止默认行为，防止页面滚动
+        e.preventDefault();
+        e.stopPropagation();
+
+        // 继续处理拖拽逻辑
+        this.handleTouchMove(e);
+      }
     },
 
     // 触摸移动处理
     onTouchMove(e) {
       if (!this.isTouchDragging) return;
 
+      // 当处于拖拽状态时，阻止默认行为
+      if (this.isTouchDragging) {
+        e.oriEvent.preventDefault();
+        e.oriEvent.stopPropagation();
+      }
+
+      this.handleTouchMove(e);
+    },
+
+    // 抽取通用的触摸移动处理逻辑
+    handleTouchMove(e) {
+      console.log(this.isTouchDragging, 'this.isTouchDragging111111');
+      if (!this.isTouchDragging) return;
+
       const touch = e.changedTouches[0];
 
       // 更新目标位置而非直接设置
@@ -793,9 +731,9 @@ export default {
           );
           const centerScore = 1 - distanceFromCenter;
 
-          // 只有当分数更高且高于阈值时才更新bestTarget
-          // 提高阈值到0.35，确保更稳定的交换判断
-          if (centerScore > maxCenterScore && centerScore > 0.35) {
+          // 放宽元素中心区域的判定，让交换更容易触发
+          // 降低阈值，让交换更敏感
+          if (centerScore > maxCenterScore && centerScore > 0.2) {
             maxCenterScore = centerScore;
             bestTarget = itemIndex;
           }
@@ -805,36 +743,24 @@ export default {
       // 设置悬停高亮，仅当有合格的目标时才高亮
       this.hoverIndex = bestTarget;
 
-      // 增加交换防抖动处理
-      // 如果bestTarget变化但不等于上次的目标，先记录一下
-      if (this.lastBestTarget !== bestTarget && bestTarget !== null) {
-        if (!this.targetChangeTime) {
-          this.targetChangeTime = Date.now();
-          this.pendingTarget = bestTarget;
-        } else if (Date.now() - this.targetChangeTime > 100) {
-          // 只有当目标持续100ms稳定不变时，才认为是有效目标
-          this.lastBestTarget = this.pendingTarget;
-          this.targetChangeTime = null;
-          this.pendingTarget = null;
-        }
-      } else if (bestTarget === null) {
-        // 如果没有目标，清除防抖状态
-        this.targetChangeTime = null;
-        this.pendingTarget = null;
+      // 简化交换防抖动处理，让交换更直接响应
+      if (bestTarget !== null) {
+        // 直接使用当前的最佳目标
+        this.lastBestTarget = bestTarget;
+      } else {
+        // 如果没有目标，清除lastBestTarget
+        this.lastBestTarget = null;
       }
 
       // 使用已稳定的目标进行交换
       bestTarget = this.lastBestTarget;
 
-      // 控制交换频率，改为250ms，大幅增加稳定性
+      // 控制交换频率，不要太高，但也不要太慢
       const now = Date.now();
-      if (now - this.lastSwapTime < 250 || bestTarget === null) return;
+      if (now - this.lastSwapTime < 150 || bestTarget === null) return;
 
       // 执行交换逻辑
       if (bestTarget !== this.draggingIndex) {
-        console.log(`交换元素: ${this.draggingIndex} 和 ${bestTarget}`);
-
-        // 使用ES6解构直接交换数组元素
         [
           this.processedList[this.draggingIndex],
           this.processedList[bestTarget],
@@ -842,25 +768,26 @@ export default {
           this.processedList[bestTarget],
           this.processedList[this.draggingIndex],
         ];
-
-        // 同时更新原始数据，保持同步
         [this.data.list[this.draggingIndex], this.data.list[bestTarget]] = [
           this.data.list[bestTarget],
           this.data.list[this.draggingIndex],
         ];
 
+        console.log(this.data.list, 'cdj------this.data.list');
+        
+        // 更新processedList以触发视图更新和动画效果
+        this.processedList = this.generateDataList();
+        
         // 更新拖拽索引
         this.draggingIndex = bestTarget;
         this.lastSwapTime = now;
       }
-      this.data.isEditing && e.oriEvent.stopPropagation()
-      this.data.isEditing && e.oriEvent.preventDefault()
     },
 
     // 新增：平滑更新拖拽位置的方法
     updateDragPosition() {
       // 计算当前位置到目标位置的平滑过渡
-      const easing = 0.6; // 增加缓动系数，让拖拽更跟手
+      const easing = 0.8; // 大幅提高缓动系数，让拖拽更紧跟手指
 
       this.dragCloneX +=
         (this.targetTouchX - this.touchOffsetX - this.dragCloneX) * easing;
@@ -885,32 +812,38 @@ export default {
 
     // 元素本身的触摸结束
     endTouch(e) {
-      console.log('触摸结束');
+      console.log('cdj------触摸结束');
       this.$emit('onDragEventEnd', e);
       // 如果只是短按（还在计时），就取消长按
       this.cancelLongPress();
 
       // 如果正在拖拽中，确保清理状态
       if (this.isTouchDragging) {
+        // 取消动画帧
+        if (this.animationFrameId) {
+          cancelAnimationFrame(this.animationFrameId);
+          this.animationFrameId = null;
+        }
+
         // 移除全局事件监听
-        document.removeEventListener('touchmove', this.onTouchMove, {
+        document.removeEventListener('touchmove', this.onGlobalTouchMove, {
           passive: false,
+          capture: true,
         });
         document.removeEventListener('touchend', this.onTouchEnd, {
           passive: false,
+          capture: true,
         });
 
-        // 取消动画帧
-        if (this.animationFrameId) {
-          cancelAnimationFrame(this.animationFrameId);
-          this.animationFrameId = null;
-        }
+        // 恢复页面滚动
+        document.body.style.overflow = '';
+        document.body.style.touchAction = '';
 
         this.isTouchDragging = false;
         this.isDragClone = false;
         this.hoverIndex = null;
         this.draggingIndex = null;
-        
+
         // 如果不再拖拽，恢复touch-action（但保持refresh隐藏，因为仍在编辑状态）
         const elements = this.findParentElements();
         if (elements.listInner) {
@@ -921,24 +854,32 @@ export default {
 
     // 触摸结束处理 - 全局事件
     onTouchEnd(e) {
-      console.log('全局触摸结束');
+      console.log('cdj------全局触摸结束');
+
+      if (this.isTouchDragging) {
+        // 确保阻止默认行为
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      // 取消动画帧
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+      }
 
-      // 恢复拖拽模式前的样式
-      this.restoreDragModeStyles();
-      
       // 移除全局事件监听
-      document.removeEventListener('touchmove', this.onTouchMove, {
+      document.removeEventListener('touchmove', this.onGlobalTouchMove, {
         passive: false,
+        capture: true,
       });
       document.removeEventListener('touchend', this.onTouchEnd, {
         passive: false,
+        capture: true,
       });
 
-      // 取消动画帧
-      if (this.animationFrameId) {
-        cancelAnimationFrame(this.animationFrameId);
-        this.animationFrameId = null;
-      }
+      // 恢复页面滚动
+      document.body.style.overflow = '';
+      document.body.style.touchAction = '';
 
       // 重置拖拽状态
       this.isTouchDragging = false;
@@ -956,7 +897,6 @@ export default {
         if (gridBoxes && gridBoxes.length > 0) {
           const box = gridBoxes[0];
           this.gridBoxWidth = box.offsetWidth;
-          console.log('Grid box宽度:', this.gridBoxWidth);
 
           // 更新text样式，确保不超出
           const textElements = document.querySelectorAll('.itemText');
@@ -969,19 +909,14 @@ export default {
 
     initLottieAnimations() {
       this.$nextTick(() => {
-        // 清理之前的动画实例
         Object.keys(this.lottieAnimations).forEach((key) => {
           const anim = this.lottieAnimations[key];
           if (anim && typeof anim.destroy === 'function') {
-            console.log(`销毁旧动画实例: ${key}`);
+            console.log(`cdj------销毁旧动画实例: ${key}`);
             try {
               anim.removeEventListener('complete');
-              anim.removeEventListener('DOMLoaded');
-              anim.removeEventListener('data_ready');
-              anim.removeEventListener('loaded_images');
-              anim.removeEventListener('loopComplete');
             } catch (e) {
-              console.warn(`移除事件监听器失败: ${e.message}`);
+              console.warn(`cdj------移除事件监听器失败: ${e.message}`);
             }
             anim.destroy();
           }
@@ -992,45 +927,48 @@ export default {
         this.lottieAnimations = {};
 
         console.log(
-          '开始初始化Lottie动画，列表项数量:',
+          'cdj------开始初始化Lottie动画，列表项数量:',
           this.processedList.length
         );
 
-        // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
-        setTimeout(() => {
-          // 为每个列表项初始化动画
-          this.processedList.forEach((item) => {
-            const itemId = item.itemView.id;
-            // 加载背景动画
+        // 为每个列表项初始化动画
+        this.processedList.forEach((item) => {
+          const itemId = String(item.itemView.id);
+          // 加载背景动画
+          if (item.bgAnimView && item.bgAnimView.animUrl) {
             this.loadLottieAnimation(
               item.bgAnimView,
               `bgAnim-${itemId}`,
               `bg-${itemId}`,
               item
             );
+          }
 
-            // 加载加载中动画
+          // 加载加载中动画
+          if (item.loadingAnimView && item.loadingAnimView.animUrl) {
             this.loadLottieAnimation(
               item.loadingAnimView,
               `loadingAnim-${itemId}`,
               `loading-${itemId}`,
               item
             );
+          }
 
-            // 加载前景动画
+          // 加载前景动画
+          if (item.frontAnimView && item.frontAnimView.animUrl) {
             this.loadLottieAnimation(
               item.frontAnimView,
               `frontAnim-${itemId}`,
               `front-${itemId}`,
               item
             );
-          });
-        }, 50); // 小延迟确保DOM已更新和旧动画已销毁
+          }
+        });
       });
     },
 
     // 抽取公共的loadLottieAnimation方法
-    loadLottieAnimation(animView, refName, animKey, item) {
+    loadLottieAnimation(animView, refName, animKey, item, dataIndex) {
       if (!animView || !animView.animUrl) {
         return;
       }
@@ -1052,129 +990,92 @@ export default {
           typeof animView.visibility !== 'number' ||
           animView.visibility !== 0
         ) {
-          // 使用fetch方式获取动画数据
-          fetch(animView.animUrl)
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error('Network response was not ok');
-              }
-              return response.json();
-            })
-            .then((animationData) => {
-              // 再次检查是否已有实例（可能在fetch期间创建了）
-              if (this.lottieAnimations[animKey]) {
-                this.lottieAnimations[animKey].destroy();
+          if (this.lottieAnimations[animKey]) {
+            this.lottieAnimations[animKey].destroy();
+            delete this.lottieAnimations[animKey];
+          }
+
+          // 创建新的动画实例
+          const anim = lottie.loadAnimation({
+            container: animEl[0],
+            renderer: 'svg',
+            loop: Boolean(item.animRepeatCount) || false,
+            autoplay: true,
+            path: animView.animUrl,
+            rendererSettings: {
+              preserveAspectRatio: 'xMidYMid slice',
+            },
+          });
+
+          // 保存动画实例
+          this.lottieAnimations[animKey] = anim;
+
+          // 添加动画事件监听
+          anim.addEventListener('complete', () => {
+            // 检查是否需要销毁动画（非循环动画完成后销毁）
+            if (!item.animRepeatCount) {
+              // 销毁前再次检查实例是否存在
+              if (this.lottieAnimations[animKey] === anim) {
+                // 移除所有事件监听器
+                anim.removeEventListener('complete');
+                // 销毁动画实例
+                anim.destroy();
                 delete this.lottieAnimations[animKey];
-              }
 
-              // 创建新的动画实例
-              const anim = lottie.loadAnimation({
-                container: animEl[0],
-                renderer: 'svg',
-                loop: Boolean(item.animRepeatCount) || false,
-                autoplay: true,
-                animationData: animationData,
-                rendererSettings: {
-                  preserveAspectRatio: 'xMidYMid slice',
-                },
-              });
-
-              // 保存动画实例
-              this.lottieAnimations[animKey] = anim;
-
-              // 添加动画事件监听
-
-              anim.addEventListener('complete', () => {
-                // 检查是否需要销毁动画（非循环动画完成后销毁）
-                if (!item.animRepeatCount) {
-                  // 销毁前再次检查实例是否存在
-                  if (this.lottieAnimations[animKey] === anim) {
-                    anim.removeEventListener('complete');
-                    anim.removeEventListener('DOMLoaded');
-                    anim.removeEventListener('data_ready');
-                    anim.removeEventListener('loaded_images');
-                    anim.removeEventListener('loopComplete');
-                    anim.destroy();
-                    delete this.lottieAnimations[animKey];
-
-                    // 查找并隐藏对应的动画容器
-                    this.$nextTick(() => {
-                      const animContainer =
-                        this.$refs[refName] && this.$refs[refName][0];
-                      if (animContainer) {
-                        animContainer.style.display = 'none';
-                      }
-
-                      // 将对应数据中的animUrl清空
-                      const itemId = item.itemView.id;
-                      const index = this.processedList.findIndex(
-                        (i) => i.itemView.id === itemId
-                      );
-                      if (index !== -1) {
-                        // 根据动画类型设置对应的animUrl为空
-                        if (animKey.startsWith('bg-')) {
-                          this.$set(
-                            this.processedList[index].bgAnimView,
-                            'animUrl',
-                            ''
-                          );
-                          // 同步更新原始数据
-                          const dataIndex = this.data.list.findIndex(
-                            (i) => i.itemView.id === itemId
-                          );
-                          if (dataIndex !== -1) {
-                            this.$set(
-                              this.data.list[dataIndex].bgAnimView,
-                              'animUrl',
-                              ''
-                            );
-                          }
-                        } else if (animKey.startsWith('loading-')) {
-                          this.$set(
-                            this.processedList[index].loadingAnimView,
-                            'animUrl',
-                            ''
-                          );
-                          // 同步更新原始数据
-                          const dataIndex = this.data.list.findIndex(
-                            (i) => i.itemView.id === itemId
-                          );
-                          if (dataIndex !== -1) {
-                            this.$set(
-                              this.data.list[dataIndex].loadingAnimView,
-                              'animUrl',
-                              ''
-                            );
-                          }
-                        } else if (animKey.startsWith('front-')) {
-                          this.$set(
-                            this.processedList[index].frontAnimView,
-                            'animUrl',
-                            ''
-                          );
-                          // 同步更新原始数据
-                          const dataIndex = this.data.list.findIndex(
-                            (i) => i.itemView.id === itemId
-                          );
-                          if (dataIndex !== -1) {
-                            this.$set(
-                              this.data.list[dataIndex].frontAnimView,
-                              'animUrl',
-                              ''
-                            );
-                          }
-                        }
-                      }
-                    });
+                // 查找并清空对应的动画容器，彻底移除所有内容
+                this.$nextTick(() => {
+                  const animContainer =
+                    this.$refs[refName] && this.$refs[refName][0];
+                  if (animContainer) {
+                    // 隐藏容器
+                    animContainer.style.display = 'none';
+                    // 清空容器内容，确保不显示最后一帧
+                    animContainer.innerHTML = '';
+                    // 确保不会阻止触摸事件
+                    animContainer.style.pointerEvents = 'none';
                   }
-                }
-              });
 
-            })
-            .catch((error) => {
-            });
-        } 
+                  if (animKey.startsWith('bg-') && !item.animRepeatCount) {
+                    this.data.list[dataIndex].bgAnimView = {
+                      ...item.bgAnimView,
+                      animUrl: '',
+                      visibility: 0,
+                    };
+                    this.processedList[dataIndex].bgAnimView = {
+                      ...item.bgAnimView,
+                      animUrl: '',
+                      visibility: 0,
+                    };
+                  } else if (animKey.startsWith('loading-') && !item.animRepeatCount) {
+                    this.data.list[dataIndex].loadingAnimView = {
+                      ...item.loadingAnimView,
+                      animUrl: '',
+                      visibility: 0,
+                    };
+                    this.processedList[dataIndex].loadingAnimView = {
+                      ...item.loadingAnimView,
+                      animUrl: '',
+                      visibility: 0,
+                    };
+                  } else if (animKey.startsWith('front-') && !item.animRepeatCount) {
+                    this.data.list[dataIndex].frontAnimView = {
+                      ...item.frontAnimView,
+                      animUrl: '',
+                      visibility: 0,
+                    };
+                    this.processedList[dataIndex].frontAnimView = {
+                      ...item.frontAnimView,
+                      animUrl: '',
+                      visibility: 0,
+                    };
+                  }
+                });
+              }
+            }
+          });
+        }
       } catch (error) {
+        console.error('加载Lottie动画失败:', error);
       }
     },
 
@@ -1189,198 +1090,35 @@ export default {
         }
       });
     },
-
-    // 暂未使用，但保留用于将来扩展
-    leftTopIconClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      // 这里可以添加将来的处理逻辑
-      return false;
-    },
-
     // 查找父级元素和refresh元素
     findParentElements() {
       // 返回存储的元素引用
       return {
         listInner: this.weexListInnerEl,
-        refresh: this.weexRefreshEl
+        refresh: this.weexRefreshEl,
       };
     },
-    
-    // 进入拖拽模式时应用样式
-    applyDragModeStyles() {
-      const elements = this.findParentElements();
-      
-      // 设置weex-list-inner的touch-action: none（只在拖拽时）
-      if (elements.listInner && this.isTouchDragging) {
-        elements.listInner.style.touchAction = 'none';
-      }
-    },
-    
-    // 退出拖拽模式时恢复样式
-    restoreDragModeStyles() {
-      const elements = this.findParentElements();
-      
-      // 恢复weex-list-inner的touch-action（只在拖拽时修改）
-      if (elements.listInner && this.isTouchDragging) {
-        elements.listInner.style.touchAction = this.originListInnerStyle;
-      }
-      
-      // 如果不在编辑状态，恢复weex-refresh的display
-      if (elements.refresh && !this.data.isEditing) {
-        elements.refresh.style.display = 'flex';
-      }
-    },
   },
   watch: {
-    // 监听初始数据变化
-    initialItems: {
-      handler(newItems) {
-        if (!this.isTouchDragging) {
-          this.items = [...newItems];
-        }
-      },
-      deep: true,
-    },
     // 监听列表数据变化，自动更新处理后的数据
     'data.list': {
       handler(newList, oldList) {
         this.processedList = this.generateDataList();
+        console.log(newList, this.processedList, 'cdj------数据变化');
         this.$nextTick(() => {
           this.updateGridBoxWidth();
           this.updateFixedItemSize();
-          this.initLottieAnimations();
-        });
-      },
-      deep: true,
-    },
-    // 监听所有动画URL变化，确保能及时更新动画
-    processedList: {
-      handler(newList, oldList) {
-        if (!newList || !newList.length || this.isTouchDragging) return;
-
-        // 避免在拖拽过程中重新初始化动画
-        if (this.draggingIndex !== null) return;
-
-        // 检查每个项目的动画URL是否有变化
-        newList.forEach((item, index) => {
-          // 如果是新增的项目，直接更新
-          if (!oldList || !oldList[index]) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              this.loadLottieAnimation(
-                item.bgAnimView,
-                `bgAnim-${itemId}`,
-                `bg-${itemId}`,
-                item
-              );
-              this.loadLottieAnimation(
-                item.loadingAnimView,
-                `loadingAnim-${itemId}`,
-                `loading-${itemId}`,
-                item
-              );
-              this.loadLottieAnimation(
-                item.frontAnimView,
-                `frontAnim-${itemId}`,
-                `front-${itemId}`,
-                item
-              );
-            });
-            return;
-          }
-
-          // 检查bgAnimView.animUrl是否变化
-          if (
-            item.bgAnimView &&
-            oldList[index].bgAnimView &&
-            item.bgAnimView.animUrl !== oldList[index].bgAnimView.animUrl
-          ) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              if (this.lottieAnimations[`bg-${itemId}`]) {
-                this.lottieAnimations[`bg-${itemId}`].destroy();
-                delete this.lottieAnimations[`bg-${itemId}`];
-              }
-              this.loadLottieAnimation(
-                item.bgAnimView,
-                `bgAnim-${itemId}`,
-                `bg-${itemId}`,
-                item
-              );
-            });
-          }
-
-          // 检查loadingAnimView.animUrl是否变化
-          if (
-            item.loadingAnimView &&
-            oldList[index].loadingAnimView &&
-            item.loadingAnimView.animUrl !==
-              oldList[index].loadingAnimView.animUrl
-          ) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              if (this.lottieAnimations[`loading-${itemId}`]) {
-                this.lottieAnimations[`loading-${itemId}`].destroy();
-                delete this.lottieAnimations[`loading-${itemId}`];
-              }
-              this.loadLottieAnimation(
-                item.loadingAnimView,
-                `loadingAnim-${itemId}`,
-                `loading-${itemId}`,
-                item
-              );
-            });
-          }
-
-          // 检查frontAnimView.animUrl是否变化
-          if (
-            item.frontAnimView &&
-            oldList[index].frontAnimView &&
-            item.frontAnimView.animUrl !== oldList[index].frontAnimView.animUrl
-          ) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              if (this.lottieAnimations[`front-${itemId}`]) {
-                this.lottieAnimations[`front-${itemId}`].destroy();
-                delete this.lottieAnimations[`front-${itemId}`];
-              }
-              this.loadLottieAnimation(
-                item.frontAnimView,
-                `frontAnim-${itemId}`,
-                `front-${itemId}`,
-                item
-              );
-            });
-          }
         });
       },
       deep: true,
     },
-    // 添加对编辑状态的监听
-    'data.isEditing': {
-      handler(newValue) {
-        const elements = this.findParentElements();
-        if (elements.refresh) {
-          if (newValue) {
-            elements.refresh.style.maxHeight = '0px';
-          } else {
-            elements.refresh.style.maxHeight = '999px'
-          }
-        }
-      },
-      immediate: true
-    },
   },
   mounted() {
-    console.log(this.data, 'djdjdjdjdjdjdj');
+    console.log(this.data, 'cdj------djdjdjdjdjdjdj');
     // 初始获取grid-box宽度
     this.updateGridBoxWidth();
     // 获取并存储固定宽高
     this.updateFixedItemSize();
-
-    this.searchDom()
-
     // 监听窗口大小变化，更新grid-box宽度
     window.addEventListener('resize', () => {
       this.updateGridBoxWidth();
@@ -1399,6 +1137,19 @@ export default {
     document.removeEventListener('touchend', this.onTouchEnd, {
       passive: false,
     });
+    // 确保全局事件监听也被清理
+    document.removeEventListener('touchmove', this.onGlobalTouchMove, {
+      passive: false,
+      capture: true,
+    });
+    document.removeEventListener('touchend', this.onTouchEnd, {
+      passive: false,
+      capture: true,
+    });
+    // 恢复页面滚动状态
+    document.body.style.overflow = '';
+    document.body.style.touchAction = '';
+
     window.removeEventListener('resize', () => {
       this.updateGridBoxWidth();
       this.updateFixedItemSize();
@@ -1416,15 +1167,25 @@ export default {
       if (anim && typeof anim.destroy === 'function') {
         try {
           anim.removeEventListener('complete');
-          anim.removeEventListener('DOMLoaded');
-          anim.removeEventListener('data_ready');
-          anim.removeEventListener('loaded_images');
-          anim.removeEventListener('loopComplete');
         } catch (e) {
+          console.warn(`移除事件监听器失败: ${e.message}`);
         }
         anim.destroy();
       }
       delete this.lottieAnimations[key];
+
+      // 尝试清理对应的DOM容器
+      const parts = key.split('-');
+      if (parts.length === 2) {
+        const animType = parts[0]; // bg, loading, front
+        const itemId = parts[1];
+        const refName = `${animType}Anim-${itemId}`;
+        const animContainer = this.$refs[refName] && this.$refs[refName][0];
+        if (animContainer) {
+          animContainer.innerHTML = '';
+          animContainer.style.display = 'none';
+        }
+      }
     });
 
     // 确保动画实例对象被清空
@@ -1433,11 +1194,6 @@ export default {
   created() {
     // 初始化处理后的数据列表
     this.processedList = this.generateDataList();
-
-    // 添加测试拖拽模式的方法
-    window.testDragMode = (index = 0) => {
-      this.testDragMode(index);
-    };
   },
 };
 </script>
@@ -1469,8 +1225,10 @@ button {
 
 /* 优化排序过渡效果 */
 .grid-fade-move {
-  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
   will-change: transform;
+  position: relative;
+  z-index: 2;
 }
 
 .grid-item {
@@ -1510,7 +1268,9 @@ button {
   top: 0;
   pointer-events: none;
 }
-
+.lottie-container >>> * {
+  pointer-events: none;
+}
 .bg-anim,
 .front-anim {
   z-index: 1;