странное смещение между курсором и перетаскиваемой картой в react-beautiful-dnd, когда я использую масштаб страницы - PullRequest
Новая
       121

странное смещение между курсором и перетаскиваемой картой в react-beautiful-dnd, когда я использую масштаб страницы

0 голосов
/ 05 августа 2020

Я пытаюсь создать проект списка перетаскивания с помощью response-beautiful-dnd, чтобы позволить мне перетащить список карточек из списка в другой или внутри того же списка, все это тоже работает, но когда я добавил масштаб значение, чтобы я мог изменить значение масштаба масштабирования моего списка, появляется странное смещение между перетаскиваемой картой и курсором, пожалуйста, помогите мне решить эту проблему. Вы можете найти весь исходный код, перейдя по ссылке: https://codepen.io/mansourkacem/pen/MWyWrVw?editors=0110

      <React.Fragment>
        <button onClick={() => this.setState({ zoomValue: this.state.zoomValue - 0.3 })}>-</button>
        <DragDropContext onDragEnd={this.handleDragEnd}>
          <div
            className="container"
            style={{ backgrounColor: 'black', transform: `scale(${this.state.zoomValue})` }}
          >
            {columns.map((column, index) => (
              <Droppable droppableId={`${column.id}`}>
                {(providedx, snapshotx) => {
                  return (
                    <div
                      // className="DndContainer"
                      key={index}
                      style={{
                        backgroundColor: snapshotx.isDraggingOver ? '#F6E8E5' : 'white',
                        height: '100%',
                      }}
                      ref={providedx.innerRef}
                    >
                      <div className="column">
                        {column.items.map((item, ind) => {
                          return (
                            <Draggable draggableId={column.id + item.id} index={ind}>
                              {(provided2, snapshot2) => {
                                const backgroundColor = snapshot2.isDragging ? 'red' : ''
                                return (
                                  <div
                                    ref={provided2.innerRef}
                                    {...provided2.dragHandleProps}
                                    {...provided2.draggableProps}
                                    className="card"
                                  >
                                    <span>
                                      <b>{item.label}</b>
                                    </span>
                                  </div>
                                )
                              }}
                            </Draggable>
                          )
                        })}
                      </div>
                    </div>
                  )
                }}
              </Droppable>
            ))}
          </div>
        </DragDropContext>
      </React.Fragment>
...