diff --git a/packages/client/src/schemas/kanban/index.tsx b/packages/client/src/schemas/kanban/index.tsx index 89c8056a4..5f8fa42b3 100644 --- a/packages/client/src/schemas/kanban/index.tsx +++ b/packages/client/src/schemas/kanban/index.tsx @@ -6,7 +6,16 @@ import { useField, useForm, } from '@formily/react'; -import { DndContext, DragOverlay, closestCorners } from '@dnd-kit/core'; +import { + DndContext, + DragOverlay, + closestCorners, + rectIntersection, + closestCenter, + useSensors, + useSensor, + MouseSensor, +} from '@dnd-kit/core'; import { SortableContext, rectSortingStrategy, @@ -48,6 +57,7 @@ export function SortableItem(props) { transition, } = useSortable({ id: props.id, + disabled: props.disabled, data: { type: props.type, nodeRef, @@ -70,6 +80,7 @@ export function SortableItem(props) { {...attributes} {...listeners} > + {/*
drag
*/} {props.children} ); @@ -110,6 +121,22 @@ export const useKanban = () => { return useContext(KanbanContext); }; +class MyMouseSensor extends MouseSensor { + static activators = [ + { + eventName: 'onMouseDown' as const, + handler: (event) => { + if (event.target.tagName === 'DIV') { + return true; + } + console.log('event.target.tagName', event.target.tagName); + event.target; + return false; + }, + }, + ]; +} + const InternalKanban = observer((props: any) => { const field = useField(); const groupName = field.componentProps.groupName; @@ -163,7 +190,8 @@ const InternalKanban = observer((props: any) => { const [dragOverlayContent, setDragOverlayContent] = useState(''); const [style, setStyle] = useState({}); const containerRef = useRef(); - console.log({ style }) + console.log({ style }); + const sensors = useSensors(useSensor(MyMouseSensor)); return (
@@ -173,14 +201,18 @@ const InternalKanban = observer((props: any) => {
{ const el = event?.active?.data?.current?.nodeRef ?.current as HTMLElement; console.log(event, el); setDragOverlayContent(el?.outerHTML); - setStyle({ width: el.clientWidth, height: containerRef.current?.clientHeight }); + setStyle({ + width: el.clientWidth, + height: containerRef.current?.clientHeight, + }); }} - // collisionDetection={closestCorners} + collisionDetection={closestCenter} onDragEnd={({ active, over }) => { const source = values.find((item) => item.id === active?.id); const target = values.find((item) => item.id === over?.id); @@ -225,7 +257,8 @@ const InternalKanban = observer((props: any) => { }} >
{ id={column.value} key={column.value} type={'column'} + disabled className={'column'} > @@ -269,6 +303,7 @@ const InternalKanban = observer((props: any) => { key={item.id} className={'item'} id={item.id} + // disabled type={'item'} > { name={addCardSchema?.name} schema={addCardSchema} /> - {/* */} ))} -
- {/* */} - - 添加列表 - -