При перетаскивании response-beautiful-dnd не показывает перетаскиваемый элемент в постоянном ящике material-ui-next.com
У меня есть постоянный ящик, в котором хранится список с перетаскиваемыми предметами. Функциональность есть, но при перетаскивании элемента перетаскиваемый элемент не отображается. Я могу перетащить элемент идеально, и пространство выделяется, включая анимации, как это предусмотрено структурой 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);
4 ответа
Для всех, кто борется с этим. Скорее всего, потому что в вашем родительском элементе есть набор преобразований. Даже если это нулевое преобразование, оно испортит преобразования на фиксированном дочернем элементе. Таким образом, единственное известное решение - удалить преобразование на родительском элементе (или установить его в "none").
Или вы можете попробовать поиграть с реактивными порталами для альтернативного решения.
Это можно исправить, переопределив предоставленные реквизиты в
const getItemStyle = (isDragging, draggableStyle) => ({
...draggableStyle,
userSelect: 'none',
position:static,
padding: 8 * 2,
margin: `0 0 8px 0`,
background: isDragging ? 'lightgreen' : 'red',
});
У меня была такая же проблема при использовании response-beautiful-dnd в ящике Material-UI после того, как "трансформация" перетаскиваемого элемента исчезла бы.
Однако вы можете предотвратить это поведение, установив для свойства transform списка сброса значение none и предотвратив наследование преобразования от Drawer или любого другого преобразованного элемента.
<Droppable style={{ transform: "none" }} droppableId="droppable">
Если какой-либо из ответов здесь не работает, я бы предложил использовать их руководство по перевоспитанию . По сути, они реализовали API-интерфейс клонирования, который будет клонировать перетаскиваемый элемент в корень dom. Это якобы более эффективно, чем использование порталов.