product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

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

Browse Source
This commit is contained in:
yuantao
2025-10-16 10:56:32 +08:00
parent 1cb724acbd
commit adf570d89f
1 changed files with 58 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/components/RichTextEditor.vue
View File

@@ -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 target = e.target
// 检查是否触摸的是删除按钮
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
}
const img = e.target
if (!img.classList.contains('editor-image')) 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) {