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 */}
<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"
onPointerDown={(e) => dragControls.start(e)}
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) => { e.preventDefault(); dragControls.start(e) }}
>
<GripVertical className="h-4 w-4" />
</div>
@@ -807,8 +807,8 @@ function CategoryCard({
<div className="flex items-center gap-2 px-3 py-3 bg-text/3">
{/* Category Drag Handle */}
<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"
onPointerDown={(e) => dragControls.start(e)}
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) => { e.preventDefault(); dragControls.start(e) }}
>
<GripVertical className="h-4 w-4" />
</div>
+3 -3
View File
@@ -135,10 +135,10 @@ function ScreenshotCard({
{/* Drag handle (top-left) */}
<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'
onPointerDown={(e) => dragControls.start(e)}
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) => { e.preventDefault(); dragControls.start(e) }}
>
<GripVertical className='h-3.5 w-3.5' />
<GripVertical className='h-4 w-4' />
</div>
{/* Remove button (top-right) */}