与 react-beautiful-dnd 的额外间距

问题描述

在水平行上拖放时会添加额外的空间（可以在 this gif 中看到）。将材料 ui 与 react beautiful dnd 结合使用。有没有人遇到过这个问题？认为可能与库在选择元素时添加间距（或不保持现有间距）有关。

家长：

              <Grid className={classes.onyx} item xs={12}>
                <DragDropContext onDragEnd={this.onDragEnd}>
                  <Grid container justify="center">
                    {taskRows.map((tasks,index) => (
                      <Grid
                        className={`${classes.onyx} ${classes.maxItemSize}`}
                        item
                        xs={12}
                      >
                        <Column
                          addNewProjectName={this.addNewProjectName}
                          deleteTask={this.deleteTask}
                          droppableId={`row_${index}`}
                          editTasks={this.editTasks}
                          handleDeleteProjectLabel={
                            this.handleDeleteProjectLabel
                          }
                          isNewUser={isNewUser}
                          projectNames={projectNames}
                          tasks={tasks}
                        />
                      </Grid>
                    ))}
                  </Grid>
                </DragDropContext>
              </Grid>

列：

    return (
      <Droppable direction="horizontal" droppableId={droppableId}>
        {(provided) => {
          return (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <Grid container spacing={3}>
                {tasks.map((task,index) => {
                  return (
                    <Grid item key={task.id} xs={4}>
                      <TaskCard
                        addNewProjectName={addNewProjectName}
                        completed={task.completed}
                        deleteTask={deleteTask}
                        draggableIndex={index}
                        editTasks={editTasks}
                        enableDragging={!task.completed}
                        handleDeleteProjectLabel={handleDeleteProjectLabel}
                        hideAddTaskButton={true}
                        isNewUser={isNewUser}
                        isRoottask={false}
                        projectNames={projectNames}
                        projectValue={task.projectName}
                        taskId={task.id}
                        textFieldValue={task.value}
                        timeLabelText={getTimeLabelText(task)}
                      />
                    </Grid>
                  );
                })}
              </Grid>
              {provided.placeholder}
            </div>
          );
        }}
      </Droppable>
    );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）