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

241
src/components/RichTextEditor.vue
View File

@@ -96,64 +96,15 @@ onMounted(() => {
}); });
} }
// 为图片容器添加事件监听器（用于拖拽功能） // 为图片容器添加点击事件以显示/隐藏删除按钮
container.addEventListener('touchstart', handleTouchStart)
container.addEventListener('touchmove', handleTouchMove)
container.addEventListener('touchend', handleTouchEnd)
container.addEventListener('touchcancel', handleTouchCancel)
// 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
container.addEventListener('click', function(e) { container.addEventListener('click', function(e) {
// 如果当前没有处于拖拽状态，则切换删除按钮显示状态 e.stopPropagation();
if (!dragState.value.isLongPress) { // 切换删除按钮的显示状态
e.stopPropagation(); if (deleteBtn) {
// 切换删除按钮的显示状态 if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
if (deleteBtn) { deleteBtn.style.display = 'block';
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { } else {
deleteBtn.style.display = 'block'; deleteBtn.style.display = 'none';
} 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';
}
}
}
});
// 为图片容器添加触摸事件以显示/隐藏删除按钮
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';
}
} }
} }
}); });
@@ -833,6 +784,12 @@ const insertImage = () => {
} }
tempImg.src = imageDataUrl tempImg.src = imageDataUrl
// 添加触摸事件监听器实现拖拽功能
imgContainer.addEventListener('touchstart', handleTouchStart)
imgContainer.addEventListener('touchmove', handleTouchMove)
imgContainer.addEventListener('touchend', handleTouchEnd)
imgContainer.addEventListener('touchcancel', handleTouchCancel)
// 为删除按钮添加点击事件 // 为删除按钮添加点击事件
deleteBtn.addEventListener('click', function(e) { deleteBtn.addEventListener('click', function(e) {
e.stopPropagation(); e.stopPropagation();
@@ -840,41 +797,14 @@ const insertImage = () => {
handleInput(); handleInput();
}); });
// 为图片容器添加事件监听器（用于拖拽功能和删除按钮切换） // 为图片容器添加点击事件以显示/隐藏删除按钮
imgContainer.addEventListener('touchstart', handleTouchStart)
imgContainer.addEventListener('touchmove', handleTouchMove)
imgContainer.addEventListener('touchend', handleTouchEnd)
imgContainer.addEventListener('touchcancel', handleTouchCancel)
// 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
imgContainer.addEventListener('click', function(e) { imgContainer.addEventListener('click', function(e) {
// 如果当前没有处于拖拽状态，则切换删除按钮显示状态 e.stopPropagation();
if (!dragState.value.isLongPress) { // 切换删除按钮的显示状态
e.stopPropagation(); if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
// 切换删除按钮的显示状态 deleteBtn.style.display = 'block';
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { } else {
deleteBtn.style.display = 'block'; deleteBtn.style.display = 'none';
} 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';
}
} }
}); });
@@ -971,37 +901,14 @@ const handleKeydown = e => {
// 处理触摸开始事件 // 处理触摸开始事件
const handleTouchStart = (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.userSelect = 'none' img.style.webkitUserSelect = 'none'
img.style.webkitUserSelect = 'none' img.style.mozUserSelect = 'none'
img.style.mozUserSelect = 'none' img.style.msUserSelect = 'none'
img.style.msUserSelect = 'none'
}
// 清除之前的定时器 // 清除之前的定时器
if (dragState.value.longPressTimer) { if (dragState.value.longPressTimer) {
@@ -1020,13 +927,11 @@ const handleTouchStart = (e) => {
dragState.value.currentY = e.touches[0].clientY dragState.value.currentY = e.touches[0].clientY
// 添加拖拽样式 // 添加拖拽样式
if (img) { img.classList.add('dragging')
img.classList.add('dragging') img.style.opacity = '0.9'
img.style.opacity = '0.9' img.style.transform = 'scale(0.98)'
img.style.transform = 'scale(0.98)' img.style.zIndex = '999'
img.style.zIndex = '999' img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
}
// 添加拖拽指示器 // 添加拖拽指示器
const indicator = document.createElement('div') const indicator = document.createElement('div')
@@ -1059,10 +964,10 @@ const handleTouchStart = (e) => {
if (navigator.vibrate) { if (navigator.vibrate) {
navigator.vibrate(10) navigator.vibrate(10)
} }
}, 300) // 300毫秒长按触发拖拽
// 阻止页面滚动 // 阻止页面滚动
e.preventDefault() 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) const distance = Math.abs(draggedCenterY - targetCenterY)
if (distance < overlapThreshold) { 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) { container.addEventListener('click', function(e) {
e.stopPropagation(); e.stopPropagation();
// 切换删除按钮的显示状态 // 切换删除按钮的显示状态
@@ -1619,44 +1510,15 @@ defineExpose({
}); });
} }
// 为图片容器添加事件监听器（用于拖拽功能） // 为图片容器添加点击事件以显示/隐藏删除按钮
container.addEventListener('touchstart', handleTouchStart)
container.addEventListener('touchmove', handleTouchMove)
container.addEventListener('touchend', handleTouchEnd)
container.addEventListener('touchcancel', handleTouchCancel)
// 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
container.addEventListener('click', function(e) { container.addEventListener('click', function(e) {
// 如果当前没有处于拖拽状态，则切换删除按钮显示状态 e.stopPropagation();
if (!dragState.value.isLongPress) { // 切换删除按钮的显示状态
e.stopPropagation(); if (deleteBtn) {
// 切换删除按钮的显示状态 if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
if (deleteBtn) { deleteBtn.style.display = 'block';
if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { } else {
deleteBtn.style.display = 'block'; deleteBtn.style.display = 'none';
} 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';
}
} }
} }
}); });
@@ -1713,6 +1575,19 @@ defineExpose({
handleInput(); 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) }, 0)
} catch (error) { } catch (error) {