You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm encountering a strange problem with a basic dnd-kit/core setup.
I have Trello-like vertical columns that contain droppables. the columns are in a horizontally scrollable parent.
If there are enough columns that they do not all fit in the viewport at once, then autoscroll will mean that any draggable that is dragged from the leftmost column cannot be put back into the leftmost column once it has scrolled off the left edge of the viewport. I'm guessing this is because the autoscroll is relative to the parent of the draggable, which is going to be permanently to the left of my cursor if it's past the left edge of the viewport.
here's a video of this happening:
20240604-dndkit-autoscroll.mov
Here you can see that I am not able to autoscroll back to the "Open" column. because of DragOverlay I am also not able to manually scroll to get the leftmost column in view either.
Code
here's the code of the App.tsx file for this. All the dnd-kit logic is in this file (though each column's Droppable is part of the List component):
import{Board,List,Card,Draggable,AppBar,NewListButton,NewListForm,}from"./components";import{listsasinitialLists}from"./data/lists";import{getCardById,cardsasinitialCards}from"./data/cards";import{useState}from"react";import{DndContext,DragEndEvent,DragOverlay,DragStartEvent,}from"@dnd-kit/core";constApp=()=>{const[lists,setLists]=useState(initialLists);const[cards,setCards]=useState(initialCards);const[draggingId,setDraggingId]=useState<string|undefined>(undefined);const[addingList,setAddingList]=useState<number|undefined>(undefined);consthandleDragStart=({ active }: DragStartEvent)=>{setDraggingId(active.id.toString());};consthandleDragEnd=({ over, active }: DragEndEvent)=>{setDraggingId(undefined);if(over){constactiveCard=cards.find((c)=>c.id.toString()===active.id);if(activeCard){setCards((prevCards)=>[
...prevCards.filter((c)=>c.id.toString()!==active.id),{ ...activeCard,list: parseInt(over.id.toString(),10)asnumber},]);}}};consthandleAddList=(index: number)=>(name: string)=>{setLists((prevLists)=>[
...prevLists.slice(0,index),{id: Date.now(), name },
...prevLists.slice(index),]);setAddingList(undefined);};consthandleDeleteList=(id: number)=>()=>{setLists((prevLists)=>prevLists.filter((l)=>l.id!==id));setCards((prevCards)=>prevCards.map((c)=>{constnewCard=c;if(c.list===id){newCard.list=0;}returnnewCard;}));};constshowNewListForm=(index: number)=>()=>{setAddingList(index);};constcancelAddingList=()=>{setAddingList(undefined);};constisAddingList=addingList!==undefined;constisDragging=draggingId!==undefined;return(<divclassName="flex flex-col h-screen max-h-screen"><AppBar/><DndContextonDragEnd={handleDragEnd}onDragStart={handleDragStart}><Board>{lists.map((list,index)=>(<><Listkey={list.id}id={list.id.toString()}title={list.name}onDelete={index>0 ? handleDeleteList(list.id) : undefined}>{/** The children of `List` are wrapped in a Droppable in the List component */}{cards.filter((c)=>c.list===list.id).map(({ id, title })=>{return(<Draggablekey={id}id={id.toString()}><Cardkey={id}id={id.toString()}title={title}>{title}</Card></Draggable>);})}</List>{isAddingList ? (<divclassName="w-0 border border-transparent"/>) : (<NewListButtonlast={index===lists.length-1}onClick={showNewListForm(index)}/>)}{isAddingList&&addingList===index&&(<NewListFormonCancel={cancelAddingList}onSave={handleAddList(index+1)}/>)}</>))}</Board><DragOverlayclassName="cursor-grabbing"wrapperElement="ul">{isDragging ? (<Cardkey={draggingId}id={draggingId}title={getCardById(parseInt(draggingId))?.title}>{getCardById(parseInt(draggingId))?.title}</Card>) : null}</DragOverlay></DndContext></div>);};exportdefaultApp;
The text was updated successfully, but these errors were encountered:
I'm encountering a strange problem with a basic dnd-kit/core setup.
I have Trello-like vertical columns that contain droppables. the columns are in a horizontally scrollable parent.
If there are enough columns that they do not all fit in the viewport at once, then autoscroll will mean that any draggable that is dragged from the leftmost column cannot be put back into the leftmost column once it has scrolled off the left edge of the viewport. I'm guessing this is because the autoscroll is relative to the parent of the draggable, which is going to be permanently to the left of my cursor if it's past the left edge of the viewport.
here's a video of this happening:
20240604-dndkit-autoscroll.mov
Here you can see that I am not able to autoscroll back to the "Open" column. because of
DragOverlay
I am also not able to manually scroll to get the leftmost column in view either.Code
here's the code of the
App.tsx
file for this. All the dnd-kit logic is in this file (though each column'sDroppable
is part of theList
component):The text was updated successfully, but these errors were encountered: