Удалите Draggable из Parent, сохраняя Draggable Child в реакции-beautiful-dnd - PullRequest
Новая
       13

Удалите Draggable из Parent, сохраняя Draggable Child в реакции-beautiful-dnd

0 голосов
/ 25 апреля 2019

У меня есть столбцы с элементами в них.В настоящее время, основываясь на коде, который я скопировал с react-beautiful-dnd, столбцы и элементы можно перетаскивать, и это работает хорошо, но я не хочу, чтобы столбцы перетаскивались.

Если я удаляю <Draggable/> компонент, React расстраивается из-за использования функции в качестве ребенка.Я перепробовал множество других вещей, но безуспешно.Любые предложения о том, как удалить функцию перетаскивания столбцов из этого компонента? 

// @flow
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import { Draggable } from 'react-beautiful-dnd';
import { grid, colors, borderRadius } from './dnd/constants';
import PlayerList from './dnd/player-list';
import Title from './dnd/title';

const Container = styled('div')`
  margin: ${grid}px;
`;

const Header = styled('div')`
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: ${borderRadius}px;
  border-top-right-radius: ${borderRadius}px;
  background-color: ${({ isDragging }) => (isDragging ? colors.blue.lighter : colors.blue.light)};
  transition: background-color 0.1s ease;

  &:hover {
    background-color: ${colors.blue.lighter};
  }
`;

const Column = ({ title, players, index }) => (
  <Draggable draggableId={title} index={index}>
    {(provided, snapshot) => (
      <Container innerRef={provided.innerRef} {...provided.draggableProps}>
        <Header isDragging={snapshot.isDragging}>
          <Title
            isDragging={snapshot.isDragging}
            {...provided.dragHandleProps}
          >
            {title}
          </Title>
        </Header>
        <PlayerList
          listId={title}
          players={players}
        />
      </Container>
    )}
  </Draggable>
);

Column.propTypes = {
  title: PropTypes.string.isRequired,
  players: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  index: PropTypes.number.isRequired,
};

export default Column;

1 Ответ

1 голос
/ 26 апреля 2019
  1. Удалите Draggable полностью из вашего Column
const Column = ({ title, players, index }) => (
 <Container>
   <Header isDragging={false}>
     <Title isDragging={false}>
        {title}
     </Title>
  </Header>
  <PlayerList
     listId={title}
     players={players}
   />
</Container>
);
Возможно, вы захотите удалить Droppable обертки со всех Columns.Скорее всего, это будет компонент Board, который вы здесь не включили
...