#Draggable List has issues in Modal

1 messages · Page 1 of 1 (latest)

stable pawn
#

I have a draggable list, like this one https://ui.mantine.dev/component/dnd-list-handle but i've put it inside of a Modal. When I drag, the dragging items are offset from the mouse by the distance of the top left of the modal from the top left of the page.

image.png
stable pawn
#

turns out, (obviously now) that the snapshot style is off by --mantine-navbar-width in x and the height of my app shell header in y.

#

quick fix

delicate solar
#

also rendering the list within a portal will help with the actual issue

# 
<DragDropContext
              >
                <Droppable droppableId='file-list' direction='vertical'>
                  {(droppableProvided) => (
                    <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
                      {fileList.map((item, index) => (
                        <Draggable key={item.id} draggableId={item.id} index={index}>
                          {(draggableProvided, draggableSnapshot) => {
                            const child = (
                             <div ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} {...draggableProvided.dragHandleProps}
                              >
                                <MyComponent />
                              </div>
                            )
                            if (draggableSnapshot.isDragging) {
                              return <Portal>{child}</Portal>
                            } else {
                              return child
                            }
                          }}
                        </Draggable>
                      ))}
                      {droppableProvided.placeholder}
                    </div>
                  )}
                </Droppable>
              </DragDropContext>

This was my solution. let it inspire you. (some non essential parts have been removed so that it fits in one message)

 if (draggableSnapshot.isDragging) {
     return <Portal>{child}</Portal>
 } else {
     return child
 }

with this being the solving part