\"feat: 实现图片排序后自动退出排序模式\"

This commit is contained in:
yuantao
2025-10-16 10:27:58 +08:00
parent 3dedcb615b
commit c0578dd02d

View File

@@ -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()
}
// 更新工具栏状态