opt out of "move out of the way" functionality?

Question

I'm using react-beautiful-dnd for my project.

I'm trying to make two draggables swap places (between droppables). Basically I only allow 1 draggable per droppable.

Everything is working fine, except for one part. The feature "move out of the way" keeps moving draggables away when I drag over them, but I don't want that.

Does anyone know a way of NOT moving draggables out of the way?

Answer 1

I managed to find a solution myself! It's a hacky one, so if anyone knows a more clean way of doing it, please let me know.

If anyone else wonders how to do this, here's how I did it:

I created a class non-stranslatable:

.non-translatable {
    -webkit-transform: unset !important;
    transform: unset !important;
  }

Then in my draggable component I added this:

className={cx('my-draggable', {   // cx is from the classnames package
              'non-translatable': !snapshot.isDragging,
            })}

If you don't want to use classnames package, this is pretty much the same:

className={`my-draggable${!snapshot.isDragging ? ' non-translatable' : ''}`}

Like I said, this is pretty hacky, so if there's a more "correct" way, let me know!