\"feat: 撤回拖拽功能正常版本并重新添加删除按钮功能\"

src/components/RichTextEditor.vue

@@ -96,16 +96,8 @@ onMounted(() => {
         });
       }
       
-      // 为图片容器添加事件监听器（用于拖拽功能）
+      // 为图片容器添加点击事件以显示/隐藏删除按钮
-      container.addEventListener('touchstart', handleTouchStart)
-      container.addEventListener('touchmove', handleTouchMove)
-      container.addEventListener('touchend', handleTouchEnd)
-      container.addEventListener('touchcancel', handleTouchCancel)
-      
-      // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
       container.addEventListener('click', function(e) {
-        // 如果当前没有处于拖拽状态，则切换删除按钮显示状态
-        if (!dragState.value.isLongPress) {
         e.stopPropagation();
         // 切换删除按钮的显示状态
         if (deleteBtn) {
@@ -115,47 +107,6 @@ onMounted(() => {
             deleteBtn.style.display = 'none';
           }
         }
-        }
-      });
-      
-      // 为图片容器添加触摸事件以显示/隐藏删除按钮
-      container.addEventListener('touchend', function(e) {
-        // 检查是否为轻触（非拖拽）
-        if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
-          // 清除长按定时器
-          clearTimeout(dragState.value.longPressTimer);
-          dragState.value.longPressTimer = null;
-          
-          e.stopPropagation();
-          // 切换删除按钮的显示状态
-          if (deleteBtn) {
-            if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-              deleteBtn.style.display = 'block';
-            } else {
-              deleteBtn.style.display = 'none';
-            }
-          }
-        }
-      });
-      
-      // 为图片容器添加触摸事件以显示/隐藏删除按钮
-      container.addEventListener('touchend', function(e) {
-        // 检查是否为轻触（非拖拽）
-        if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
-          // 清除长按定时器
-          clearTimeout(dragState.value.longPressTimer);
-          dragState.value.longPressTimer = null;
-          
-          e.stopPropagation();
-          // 切换删除按钮的显示状态
-          if (deleteBtn) {
-            if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-              deleteBtn.style.display = 'block';
-            } else {
-              deleteBtn.style.display = 'none';
-            }
-          }
-        }
       });
     })
   }, 0)
@@ -833,6 +784,12 @@ const insertImage = () => {
           }
           tempImg.src = imageDataUrl
 
+          // 添加触摸事件监听器实现拖拽功能
+          imgContainer.addEventListener('touchstart', handleTouchStart)
+          imgContainer.addEventListener('touchmove', handleTouchMove)
+          imgContainer.addEventListener('touchend', handleTouchEnd)
+          imgContainer.addEventListener('touchcancel', handleTouchCancel)
+          
           // 为删除按钮添加点击事件
           deleteBtn.addEventListener('click', function(e) {
             e.stopPropagation();
@@ -840,16 +797,8 @@ const insertImage = () => {
             handleInput();
           });
           
-          // 为图片容器添加事件监听器（用于拖拽功能和删除按钮切换）
+          // 为图片容器添加点击事件以显示/隐藏删除按钮
-          imgContainer.addEventListener('touchstart', handleTouchStart)
-          imgContainer.addEventListener('touchmove', handleTouchMove)
-          imgContainer.addEventListener('touchend', handleTouchEnd)
-          imgContainer.addEventListener('touchcancel', handleTouchCancel)
-          
-          // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
           imgContainer.addEventListener('click', function(e) {
-            // 如果当前没有处于拖拽状态，则切换删除按钮显示状态
-            if (!dragState.value.isLongPress) {
             e.stopPropagation();
             // 切换删除按钮的显示状态
             if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
@@ -857,25 +806,6 @@ const insertImage = () => {
             } else {
               deleteBtn.style.display = 'none';
             }
-            }
-          });
-          
-          // 为图片容器添加触摸事件以显示/隐藏删除按钮
-          imgContainer.addEventListener('touchend', function(e) {
-            // 检查是否为轻触（非拖拽）
-            if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
-              // 清除长按定时器
-              clearTimeout(dragState.value.longPressTimer);
-              dragState.value.longPressTimer = null;
-              
-              e.stopPropagation();
-              // 切换删除按钮的显示状态
-              if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-                deleteBtn.style.display = 'block';
-              } else {
-                deleteBtn.style.display = 'none';
-              }
-            }
           });
           
           console.log('Added touch event listeners')
@@ -971,37 +901,14 @@ const handleKeydown = e => {
 
 // 处理触摸开始事件
 const handleTouchStart = (e) => {
-  // 获取触摸目标
+  const img = e.target
-  const target = e.target
+  if (!img.classList.contains('editor-image')) return
-  
-  // 检查是否触摸的是删除按钮
-  if (target.classList.contains('image-delete-btn')) {
-    // 如果是删除按钮，让事件正常处理
-    return
-  }
-  
-  // 检查目标是否为图片容器或图片
-  let imgContainer = null
-  let img = null
-  
-  if (target.classList.contains('image-container')) {
-    imgContainer = target
-    img = target.querySelector('.editor-image')
-  } else if (target.classList.contains('editor-image')) {
-    img = target
-    imgContainer = target.parentElement
-  } else {
-    // 如果触摸的不是图片或图片容器，直接返回
-    return
-  }
   
   // 防止图片被选中
-  if (img) {
   img.style.userSelect = 'none'
   img.style.webkitUserSelect = 'none'
   img.style.mozUserSelect = 'none'
   img.style.msUserSelect = 'none'
-  }
   
   // 清除之前的定时器
   if (dragState.value.longPressTimer) {
@@ -1020,13 +927,11 @@ const handleTouchStart = (e) => {
     dragState.value.currentY = e.touches[0].clientY
     
     // 添加拖拽样式
-    if (img) {
     img.classList.add('dragging')
     img.style.opacity = '0.9'
     img.style.transform = 'scale(0.98)'
     img.style.zIndex = '999'
     img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
-    }
     
     // 添加拖拽指示器
     const indicator = document.createElement('div')
@@ -1059,10 +964,10 @@ const handleTouchStart = (e) => {
     if (navigator.vibrate) {
       navigator.vibrate(10)
     }
-  }, 300) // 300毫秒长按触发拖拽
     
     // 阻止页面滚动
     e.preventDefault()
+  }, 300) // 300毫秒长按触发拖拽
 }
 
 // 处理触摸移动事件
@@ -1247,7 +1152,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => {
     
     // 检查是否与目标图片重叠，使用更精确的碰撞检测
     // 当拖拽图片覆盖目标图片高度的三分之二时触发排序
-    const overlapThreshold = targetRect.height * 0.27
+    const overlapThreshold = targetRect.height * 0.67
     const distance = Math.abs(draggedCenterY - targetCenterY)
     
     if (distance < overlapThreshold) {
@@ -1540,21 +1445,7 @@ const adjustExistingImages = () => {
             });
           }
           
-          // 为图片容器添加触摸事件以显示/隐藏删除按钮
+          // 为图片容器添加点击事件以显示/隐藏删除按钮
-          container.addEventListener('touchstart', function(e) {
-            // 防止与拖拽功能冲突
-            if (!dragState.value.isLongPress) {
-              e.stopPropagation();
-              // 切换删除按钮的显示状态
-              if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-                deleteBtn.style.display = 'block';
-              } else {
-                deleteBtn.style.display = 'none';
-              }
-            }
-          });
-          
-          // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
           container.addEventListener('click', function(e) {
             e.stopPropagation();
             // 切换删除按钮的显示状态
@@ -1619,16 +1510,8 @@ defineExpose({
               });
             }
             
-            // 为图片容器添加事件监听器（用于拖拽功能）
+            // 为图片容器添加点击事件以显示/隐藏删除按钮
-            container.addEventListener('touchstart', handleTouchStart)
-            container.addEventListener('touchmove', handleTouchMove)
-            container.addEventListener('touchend', handleTouchEnd)
-            container.addEventListener('touchcancel', handleTouchCancel)
-            
-            // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
             container.addEventListener('click', function(e) {
-              // 如果当前没有处于拖拽状态，则切换删除按钮显示状态
-              if (!dragState.value.isLongPress) {
               e.stopPropagation();
               // 切换删除按钮的显示状态
               if (deleteBtn) {
@@ -1638,27 +1521,6 @@ defineExpose({
                   deleteBtn.style.display = 'none';
                 }
               }
-              }
-            });
-            
-            // 为图片容器添加触摸事件以显示/隐藏删除按钮
-            container.addEventListener('touchend', function(e) {
-              // 检查是否为轻触（非拖拽）
-              if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
-                // 清除长按定时器
-                clearTimeout(dragState.value.longPressTimer);
-                dragState.value.longPressTimer = null;
-                
-                e.stopPropagation();
-                // 切换删除按钮的显示状态
-                if (deleteBtn) {
-                  if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
-                    deleteBtn.style.display = 'block';
-                  } else {
-                    deleteBtn.style.display = 'none';
-                  }
-                }
-              }
             });
           })
         }, 0)
@@ -1713,6 +1575,19 @@ defineExpose({
                     handleInput();
                   });
                 }
+                
+                // 为图片容器添加点击事件以显示/隐藏删除按钮
+                container.addEventListener('click', function(e) {
+                  e.stopPropagation();
+                  // 切换删除按钮的显示状态
+                  if (deleteBtn) {
+                    if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+                      deleteBtn.style.display = 'block';
+                    } else {
+                      deleteBtn.style.display = 'none';
+                    }
+                  }
+                });
               })
             }, 0)
           } catch (error) {