Search code examples
reactjstsxdnd-kit

How do I ensure that draggable items drag over the top of other items (but not underneath) using react dnd-kit?

Using React and Dnd-Kit.

I've got a working vertical sorting list going, but I've found that when dragging from above to below, the item moves underneath other items. When dragging from below to above it drags over the other items. How can I ensure that it drags over (not under) the items like in this sandbox ?

here is an example of the issue I am experiencing.

I've got style being applied as recommended in the docs:

const style = {
    transform: CSS.Translate.toString(transform),
    transition,
  };

however, adding a zIndex didn't seem to work. Any ideas?

Solution

  • z-index is ignored because they are set to position: static. Try adding 'position: relative' as well as a z-index to the item you're dragging.