fix: prevent text selection and touch interference on drag handles

This commit is contained in:
2026-05-16 17:31:30 +08:00
parent fb892265c4
commit 29a8ec667f
2 changed files with 7 additions and 7 deletions
+4 -4
View File
@@ -151,8 +151,8 @@ function SettingRow({
> >
{/* Drag Handle */} {/* Drag Handle */}
<div <div
className="cursor-grab active:cursor-grabbing p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors flex items-center justify-center" className="cursor-grab active:cursor-grabbing p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors flex items-center justify-center select-none touch-none"
onPointerDown={(e) => dragControls.start(e)} onPointerDown={(e) => { e.preventDefault(); dragControls.start(e) }}
> >
<GripVertical className="h-4 w-4" /> <GripVertical className="h-4 w-4" />
</div> </div>
@@ -807,8 +807,8 @@ function CategoryCard({
<div className="flex items-center gap-2 px-3 py-3 bg-text/3"> <div className="flex items-center gap-2 px-3 py-3 bg-text/3">
{/* Category Drag Handle */} {/* Category Drag Handle */}
<div <div
className="cursor-grab active:cursor-grabbing p-1 rounded text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors shrink-0" className="cursor-grab active:cursor-grabbing p-1 rounded text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors shrink-0 select-none touch-none"
onPointerDown={(e) => dragControls.start(e)} onPointerDown={(e) => { e.preventDefault(); dragControls.start(e) }}
> >
<GripVertical className="h-4 w-4" /> <GripVertical className="h-4 w-4" />
</div> </div>
+3 -3
View File
@@ -135,10 +135,10 @@ function ScreenshotCard({
{/* Drag handle (top-left) */} {/* Drag handle (top-left) */}
<div <div
className='absolute top-2 left-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-black/70 backdrop-blur-sm cursor-grab active:cursor-grabbing transition-colors opacity-0 group-hover:opacity-100' className='absolute top-2 left-2 p-2 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-black/70 backdrop-blur-sm cursor-grab active:cursor-grabbing transition-colors opacity-0 group-hover:opacity-100 select-none touch-none'
onPointerDown={(e) => dragControls.start(e)} onPointerDown={(e) => { e.preventDefault(); dragControls.start(e) }}
> >
<GripVertical className='h-3.5 w-3.5' /> <GripVertical className='h-4 w-4' />
</div> </div>
{/* Remove button (top-right) */} {/* Remove button (top-right) */}