feat: 拖拽时支持鼠标滚轮滚动列表
- 拖拽状态下监听 wheel 事件 - 使用 preventDefault 阻止默认滚动 - 降低滚动速度 (0.5x) 提供更精确的控制 - 自动更新虚拟列表渲染范围
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
* 超过 5 条时启用虚拟列表滚动
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import { Plus, GripVertical, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
@@ -147,6 +147,37 @@ export default function FieldList({
|
||||
setActiveId(String(event.active.id));
|
||||
};
|
||||
|
||||
// 拖拽时的滚轮滚动处理
|
||||
useEffect(() => {
|
||||
if (!activeId || !containerRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 滚动容器
|
||||
const scrollAmount = e.deltaY * 0.5; // 降低滚动速度,更易控制
|
||||
const newScrollTop = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
container.scrollHeight - container.clientHeight,
|
||||
container.scrollTop + scrollAmount,
|
||||
),
|
||||
);
|
||||
container.scrollTop = newScrollTop;
|
||||
setScrollTop(newScrollTop);
|
||||
};
|
||||
|
||||
// 添加事件监听,使用 passive: false 以允许 preventDefault
|
||||
container.addEventListener('wheel', handleWheel, { passive: false });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('wheel', handleWheel);
|
||||
};
|
||||
}, [activeId]);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
setActiveId(null);
|
||||
|
||||
Reference in New Issue
Block a user