react-beautiful-dnd, how to prevent visual changes to indexes. I have two columns and when I take an object in one specific column, I don’t want to visually see the displacement of other objects when moving it along this column, I only want to move it to the second one.
I tried to implement this with styles, but this is not a solution that will help me. I would like to understand how I could change the default behavior of elements in this library. Here is my code for one of the columns:
<Droppable droppableId="internTasks">
{(provided) => (
<div
className="tasks"
{...provided.droppableProps}
ref={provided.innerRef}
>
{id &&
tasks &&
tasks.map(
(task, index) =>
task.taskJob.taskJobId && (
<Draggable
key={task.taskJob.taskJobId}
draggableId={task.taskJob.taskJobId.toString()}
index={index}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<TaskItem
taskJobPlan={task}
key={task.taskJob.taskJobId}
task={task.taskJob}
toOpenTaskDetail={toOpenTaskDetail}
/>
</div>
)}
</Draggable>
)
)}
{provided.placeholder}
</div>
)}
</Droppable>
New contributor