При перетаскивании response-beautiful-dnd не показывает перетаскиваемый элемент в постоянном ящике material-ui-next.com

Question

У меня есть постоянный ящик, в котором хранится список с перетаскиваемыми предметами. Функциональность есть, но при перетаскивании элемента перетаскиваемый элемент не отображается. Я могу перетащить элемент идеально, и пространство выделяется, включая анимации, как это предусмотрено структурой dnd, я просто не вижу, что перетаскиваю. Если я изменю ящик на постоянный ящик, все работает как положено. Какие-либо предложения?

Мой компонент (в коде прототипа): (DragDropContext объявлен в родительском компоненте)

import React from 'react';
import { Divider, Drawer, IconButton, List, ListItem, Paper, 
withStyles } from 'material-ui';
import { Draggable, Droppable } from 'react-beautiful-dnd';

const styles = {
  list: {
    width: 250,
    marginTop: 70
  },
};

const getItemStyle = (isDragging, draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: 'none',
  padding: 8 * 2,
  margin: `0 0 8px 0`,

  // change background colour if dragging
  background: isDragging ? 'lightgreen' : 'red',

  // styles we need to apply on draggables
      ...draggableStyle,

});

const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? 'lightblue' : 'none',
  padding: 8,
  width: 250,
});

class WidgetDrawer extends React.Component {

  state = { items: [{ id: 1, content: 'Widget A'}, { id: 2, content: 'Widget B'}]};

  renderWidgets() {
    const widgets = [{
      name: 'Widget A'
    }, {
      name: 'Widget B'
    }];

    return widgets.map((widget, index) => {
      return <Draggable key={widget.name} draggableId={widget.name} index={index}>
                  {(provided, snapshot) => (
                    <div>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                        <ListItem>
                          <Paper>
                            {widget.name}
                          </Paper>
                        </ListItem>
                      </div>
                      {provided.placeholder}
                    </div>
                  )}
                </Draggable>
    })
  }

  render() {

    const { classes } = this.props;

    const fullList = (
      <div className={classes.list}>
          <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index {index}>
                  {(provided, snapshot) => (
                    <div>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                        {item.content}
                      </div>
                      {provided.placeholder}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    );

    return (
     <Drawer
       variant='permanent'
       anchor="right"
       open={this.props.open}
       onClose={this.props.toggleDrawer}>
      <div
        tabIndex={0}
        role="button"
        onClick={this.props.toggleDrawer}
        onKeyDown={this.props.toggleDrawer}
      >
        {fullList}
      </div>
    </Drawer>
    )
  }
}

export default withStyles(styles)(WidgetDrawer);

Answer 1

Для всех, кто борется с этим. Скорее всего, потому что в вашем родительском элементе есть набор преобразований. Даже если это нулевое преобразование, оно испортит преобразования на фиксированном дочернем элементе. Таким образом, единственное известное решение - удалить преобразование на родительском элементе (или установить его в "none").

Или вы можете попробовать поиграть с реактивными порталами для альтернативного решения.

https://github.com/atlassian/react-beautiful-dnd/issues/128

Answer 2

Это можно исправить, переопределив предоставленные реквизиты в

const getItemStyle = (isDragging, draggableStyle) => ({
  ...draggableStyle,
  userSelect: 'none',
  position:static,
  padding: 8 * 2,
  margin: `0 0 8px 0`,
  background: isDragging ? 'lightgreen' : 'red',    
});

Answer 3

У меня была такая же проблема при использовании response-beautiful-dnd в ящике Material-UI после того, как "трансформация" перетаскиваемого элемента исчезла бы.

Однако вы можете предотвратить это поведение, установив для свойства transform списка сброса значение none и предотвратив наследование преобразования от Drawer или любого другого преобразованного элемента.

<Droppable style={{ transform: "none" }} droppableId="droppable">

Answer 4

Если какой-либо из ответов здесь не работает, я бы предложил использовать их руководство по перевоспитанию . По сути, они реализовали API-интерфейс клонирования, который будет клонировать перетаскиваемый элемент в корень dom. Это якобы более эффективно, чем использование порталов.