diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 5a3213f..5411fd7 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -611,6 +611,47 @@ const dragState = ref({ lastMoveTime: 0 }) +// 重置拖拽状态 +const resetDragState = () => { + // 清除长按定时器 + if (dragState.value.longPressTimer) { + clearTimeout(dragState.value.longPressTimer) + dragState.value.longPressTimer = null + } + + // 重置所有拖拽状态 + dragState.value.isLongPress = false + dragState.value.draggedImage = null + dragState.value.startX = 0 + dragState.value.startY = 0 + dragState.value.currentY = 0 + dragState.value.lastMoveTime = 0 + + // 移除拖拽指示器 + if (dragState.value.indicator) { + const indicator = dragState.value.indicator + indicator.style.opacity = '0' + setTimeout(() => { + if (indicator.parentNode) { + indicator.parentNode.removeChild(indicator) + } + }, 150) + dragState.value.indicator = null + } + + // 重置所有图片的拖拽样式 + if (editorRef.value) { + const draggedImages = editorRef.value.querySelectorAll('.editor-image.dragging') + draggedImages.forEach(img => { + img.classList.remove('dragging') + img.style.zIndex = '' + img.style.transition = '' + img.style.transform = '' + img.style.opacity = '' + }) + } +} + // 插入图片 const insertImage = () => { console.log('Inserting image') @@ -1049,7 +1090,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 检查是否与目标图片重叠,使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.67 + const overlapThreshold = targetRect.height * 0.01 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { @@ -1082,6 +1123,12 @@ const swapImages = (img1, img2) => { parent1.insertBefore(img2, temp) temp.remove() } + + // 触发内容更新 + handleInput() + + // 自动退出排序模式 + resetDragState() } // 更新工具栏状态