react-beautiful-dnd, how to prevent visual changes in indices

  Kiến thức lập trình

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

Илья Брагин is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT