@dolphinweex/weex-harmony 0.1.50 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

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

@@ -301,8 +301,25 @@ export default {
       this.isUpdatingPosition = true;
       
       const easing = 0.6;
-      const targetX = this.targetTouchX - this.touchOffsetX + window.pageXOffset;
-      const targetY = this.targetTouchY - this.touchOffsetY + window.pageYOffset;
+      
+      // 获取outer-container的边界
+      const containerRect = this.containerElement.getBoundingClientRect();
+      
+      // 计算相对于容器的目标位置
+      let targetX = this.targetTouchX - this.touchOffsetX - containerRect.left;
+      let targetY = this.targetTouchY - this.touchOffsetY - containerRect.top;
+      
+      // 限制拖拽范围在容器内
+      const cloneWidth = this.fixedItemWidth;
+      const cloneHeight = this.fixedItemHeight;
+      const maxX = containerRect.width - cloneWidth;
+      const maxY = containerRect.height - cloneHeight;
+      
+      // 限制X坐标
+      targetX = Math.max(0, Math.min(targetX, maxX));
+      
+      // 限制Y坐标
+      targetY = Math.max(0, Math.min(targetY, maxY));
       
       this.dragCloneX += (targetX - this.dragCloneX) * easing;
       this.dragCloneY += (targetY - this.dragCloneY) * easing;
@@ -499,32 +516,32 @@ export default {
       this.dragCloneElement = document.createElement('div');
       this.dragCloneElement.className = 'drag-clone-dynamic';
       
-             // 设置基本样式（使用不带缩放的样式方法）
-       const itemViewStyle = this.applyOptimizedAttribute(item.itemView, 'itemView', false);
-       Object.assign(this.dragCloneElement.style, {
-         position: 'absolute',
-         zIndex: '9999',
-         userSelect: 'none',
-         boxSizing: 'border-box',
-         flexDirection: 'column',
-         pointerEvents: 'none',
-         transition: 'none',
-         willChange: 'transform',
-         left: '0',
-         top: '0',
-         // 覆盖itemViewStyle中可能的宽高设置，确保使用固定尺寸
-         ...itemViewStyle,
-         width: `${this.fixedItemWidth }px`,
-         height: `${this.fixedItemHeight }px`,
-         display: 'flex',
-         justifyContent: 'space-between',
-       });
-
-                        // 创建内容HTML（不使用缩放）
-        const iconImageStyle = this.applyOptimizedAttribute(item.iconImage, 'iconImage', false);
-        const selectIconStyle = this.applyOptimizedAttribute(item.selectIcon, 'selectIcon', false);
-         const textStyle = this.applyOptimizedAttribute(item.text, 'text', false);
-         const actionButtonStyle = this.applyOptimizedAttribute(item.actionButton, 'actionButton', false);
+      // 设置基本样式（使用不带缩放的样式方法）
+      const itemViewStyle = this.applyOptimizedAttribute(item.itemView, 'itemView', false);
+      Object.assign(this.dragCloneElement.style, {
+        position: 'absolute',
+        zIndex: '9999',
+        userSelect: 'none',
+        boxSizing: 'border-box',
+        flexDirection: 'column',
+        pointerEvents: 'none',
+        transition: 'none',
+        willChange: 'transform',
+        left: '0',
+        top: '0',
+        // 覆盖itemViewStyle中可能的宽高设置，确保使用固定尺寸
+        ...itemViewStyle,
+        width: `${this.fixedItemWidth}px`,
+        height: `${this.fixedItemHeight}px`,
+        display: 'flex',
+        justifyContent: 'space-between',
+      });
+
+      // 创建内容HTML（不使用缩放）
+      const iconImageStyle = this.applyOptimizedAttribute(item.iconImage, 'iconImage', false);
+      const selectIconStyle = this.applyOptimizedAttribute(item.selectIcon, 'selectIcon', false);
+      const textStyle = this.applyOptimizedAttribute(item.text, 'text', false);
+      const actionButtonStyle = this.applyOptimizedAttribute(item.actionButton, 'actionButton', false);
       
       // 将样式对象转换为CSS字符串
       const stylesToString = (styleObj) => {
@@ -533,35 +550,35 @@ export default {
           .join('; ');
       };
 
-                           // 确保内部grid-box也使用固定尺寸（使用不带缩放的样式方法）
-        const gridBoxStyle = {
-          ...this.applyOptimizedAttribute(item.itemView, 'itemView', false),
-          width: `${this.fixedItemWidth }px`,
-          height: `${this.fixedItemHeight }px`
-        };
+      // 确保内部grid-box也使用固定尺寸（使用不带缩放的样式方法）
+      const gridBoxStyle = {
+        ...this.applyOptimizedAttribute(item.itemView, 'itemView', false),
+        width: `${this.fixedItemWidth}px`,
+        height: `${this.fixedItemHeight}px`
+      };
 
-       this.dragCloneElement.innerHTML = `
-         <div class="grid-box" style="${stylesToString(gridBoxStyle)} ;display: flex; justify-content: space-between;flex-direction: column">
-           <div class="flexBox" style="display: flex; justify-content: space-between; width: 100%; position: relative; flex-direction: row;">
-             <img src="${this.getUrl(item, 'iconImage')}" style="${stylesToString(iconImageStyle)}" />
-             <div style="pointer-events: none;">
-               <img 
-                 class="isSelected" 
-                 src="${item.itemView.isSelected 
-                   ? this.getUrl(item, 'selectIcon', 'selectedUrl')
-                   : this.getUrl(item, 'selectIcon')}"
-                 style="${stylesToString(selectIconStyle)}"
-               />
-             </div>
-           </div>
-           <div class="itemText" style="${stylesToString(textStyle)}; display: block; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-             ${this.getText(item, 'text')}
-           </div>
-         </div>
-       `;
-
-      // 挂载到body
-      document.body.appendChild(this.dragCloneElement);
+      this.dragCloneElement.innerHTML = `
+        <div class="grid-box" style="${stylesToString(gridBoxStyle)} ;display: flex; justify-content: space-between;flex-direction: column">
+          <div class="flexBox" style="display: flex; justify-content: space-between; width: 100%; position: relative; flex-direction: row;">
+            <img src="${this.getUrl(item, 'iconImage')}" style="${stylesToString(iconImageStyle)}" />
+            <div style="pointer-events: none;">
+              <img 
+                class="isSelected" 
+                src="${item.itemView.isSelected 
+                  ? this.getUrl(item, 'selectIcon', 'selectedUrl')
+                  : this.getUrl(item, 'selectIcon')}"
+                style="${stylesToString(selectIconStyle)}"
+              />
+            </div>
+          </div>
+          <div class="itemText" style="${stylesToString(textStyle)}; display: block; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+            ${this.getText(item, 'text')}
+          </div>
+        </div>
+      `;
+
+      // 挂载到outer-container而不是body，这样可以更好地控制拖拽范围
+      this.containerElement.appendChild(this.dragCloneElement);
       
       return this.dragCloneElement;
     },
@@ -947,18 +964,26 @@ export default {
           // 创建拖拽克隆元素
           this.createDragClone(index);
 
-          // 设置克隆元素的初始位置（直接使用视口坐标加滚动偏移）
-          this.dragCloneX = rect.left + window.pageXOffset;
-          this.dragCloneY = rect.top + window.pageYOffset;
+          // 计算相对于outer-container的位置
+          const containerRect = this.containerElement.getBoundingClientRect();
+          this.dragCloneX = rect.left - containerRect.left;
+          this.dragCloneY = rect.top - containerRect.top;
           this.isDragClone = true;
 
           // 立即更新位置
           this.updateDragClonePosition();
 
           requestAnimationFrame(() => {
-            // 使用触摸点减去偏移来计算正确位置
-            this.dragCloneX = this.touchStartX - this.touchOffsetX + window.pageXOffset;
-            this.dragCloneY = this.touchStartY - this.touchOffsetY + window.pageYOffset;
+            // 使用触摸点减去偏移来计算正确位置，相对于容器
+            const targetX = this.touchStartX - this.touchOffsetX - containerRect.left;
+            const targetY = this.touchStartY - this.touchOffsetY - containerRect.top;
+            
+            // 限制在容器范围内
+            const maxX = containerRect.width - this.fixedItemWidth;
+            const maxY = containerRect.height - this.fixedItemHeight;
+            
+            this.dragCloneX = Math.max(0, Math.min(targetX, maxX));
+            this.dragCloneY = Math.max(0, Math.min(targetY, maxY));
             this.updateDragClonePosition();
           });
 
@@ -1044,29 +1069,46 @@ export default {
       this.lastTouchX = touchX;
       this.lastTouchY = touchY;
 
+      // 获取容器边界
+      const containerRect = this.containerElement.getBoundingClientRect();
+      
+      // 计算用于交换检测的有效触摸点
+      // 如果触摸点在容器外，使用拖拽克隆元素的中心位置
+      let effectiveTouchX = touchX;
+      let effectiveTouchY = touchY;
+      
+      if (touchX < containerRect.left || touchX > containerRect.right || 
+          touchY < containerRect.top || touchY > containerRect.bottom) {
+        // 触摸点在容器外，使用拖拽克隆元素的中心位置
+        const cloneCenterX = this.dragCloneX + this.fixedItemWidth / 2;
+        const cloneCenterY = this.dragCloneY + this.fixedItemHeight / 2;
+        effectiveTouchX = containerRect.left + cloneCenterX;
+        effectiveTouchY = containerRect.top + cloneCenterY;
+      }
+
       // 使用缓存的网格元素
       const gridItems = this.getCachedGridItems();
       let targetIndex = null;
 
-      // 寻找触摸点所在的目标元素
+      // 寻找有效触摸点所在的目标元素
       for (const item of gridItems) {
         const itemIndex = parseInt(item.getAttribute('data-index'), 10);
         if (itemIndex === this.draggingIndex) continue;
 
         const rect = item.getBoundingClientRect();
 
-        // 触摸点是否在元素的中心区域内
+        // 有效触摸点是否在元素的中心区域内
         const centerX = (rect.left + rect.right) / 2;
         const centerY = (rect.top + rect.bottom) / 2;
         const halfWidth = rect.width * 0.3; // 缩小判断区域到30%，减少误触
         const halfHeight = rect.height * 0.3;
 
-        // 检查触摸点是否在元素的中心区域内
+        // 检查有效触摸点是否在元素的中心区域内
         if (
-          touchX >= centerX - halfWidth &&
-          touchX <= centerX + halfWidth &&
-          touchY >= centerY - halfHeight &&
-          touchY <= centerY + halfHeight
+          effectiveTouchX >= centerX - halfWidth &&
+          effectiveTouchX <= centerX + halfWidth &&
+          effectiveTouchY >= centerY - halfHeight &&
+          effectiveTouchY <= centerY + halfHeight
         ) {
           targetIndex = itemIndex;
           break; // 找到第一个符合条件的就退出
@@ -1355,6 +1397,8 @@ button {
   width: 100%;
   position: relative;
   z-index: 1;
+  /* 确保容器可以作为拖拽克隆元素的定位父元素 */
+  overflow: visible;
 }
 
 .items-container {
@@ -1472,6 +1516,18 @@ button {
 }
 
 /* 拖拽克隆元素样式（现在通过JavaScript动态应用） */
+.drag-clone-dynamic {
+  position: absolute;
+  z-index: 9999;
+  pointer-events: none;
+  user-select: none;
+  box-sizing: border-box;
+  transform-origin: center center;
+  /* 确保拖拽克隆元素不会超出容器边界 */
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
 
 .flexBox {
   display: flex;