拖放React

Question

我已经尝试过React-DND和Dragula，两者似乎都在理论上工作但是当我尝试实现它们时，即使一遍又一遍地阅读文档，我也会陷入困境。有人可以用看似基本的东西来帮助我吗？

我有一个组件，它将players列表呈现为无序列表中的列表项。我希望能够获取一个列表项并将其移动到一个新的无序列表中。我让我的物品拖得累得可怜但是我迷失了。

这是我的主要组件（我现在已经删除了Dragula和React-DND，我可以轻松地将其重新插入）

import React from 'react';
import styled from 'styled-components';
import Counter from './Counter';
import Titles from '../../../scaffold/titles';
import {players} from './players'


const ScoreList = styled.ul`
  list-style-type: none;
  margin-bottom: 3em;
`

class Counting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
                  countInfo: []
                  }
    this.incrementCount = this.incrementCount.bind(this)
    this.decrementCount = this.decrementCount.bind(this)
  }

  incrementCount(index) {
    const countInfo = [...this.state.countInfo];
    if(countInfo[index]) {
        countInfo[index].count = countInfo[index].count + 1;
        countInfo[index].nameOf = players[index].name
    }
    else {
       countInfo[index] = {count: 1, nameOf: players[index].name}
    }
    this.setState({
      countInfo
    })
  }

  decrementCount(index) {
    const countInfo = [...this.state.countInfo];
    if(countInfo[index]) {
        countInfo[index].count = countInfo[index].count - 1;
        countInfo[index].nameOf = players[index].name
    }
    else {
       countInfo[index] = {count: -1, nameOf: players[index].name}
    }
    this.setState({
      countInfo
    })
  }


  render() {
    const listPlayers = players.map((players, index) =>
      <Counter
        key={players.id}
        incrementCount={() => this.incrementCount(index)}
        decrementCount={() => this.decrementCount(index)}
        nameof={players.name}
        count={this.state.countInfo[index]? this.state.countInfo[index].count : 0}
      />
  );
    return (
     <div className="wrap">
      <Titles header="Counter" subhead="A setState() project" />
      <ScoreList>{listPlayers}</ScoreList>
      <h3>Drop here</h3>
      <ScoreList></ScoreList>
    </div>
   )
 }
}

export default Counting;

这是创建对象的组件，如果我向其添加draggable=true，它就可以拖动它

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Icon} from 'react-fa';
import { Row, Col } from 'react-flexbox-grid';
import styled from 'styled-components';

const CountCell = styled.div`
  border: 1px solid #5C57B1;
  background: #6E68C5
  width: 320px;
  display: flex;
  justify-content: center;
  height: 50px;
  align-items: center;
`

const Score = styled.span`
  color: #74D8FF;
  font-size: 26px;
  font-weight: bold;
  padding: 0 0.5em;
  display: inline-block;
  width: 30px;
  text-align: center;
`
const ScoreName = styled.span`
  color: white;
  font-size: 20px;
  padding: 0 0.5em;
  display: inline-block;
  width: 160px;
  text-align: center;
`

const CountButton = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #6E68C5;
  height: 30px;
  border: 0;
  border-radius: 50px;
  border: 3px solid white;
  width: 30px;
  transition: all 250ms;
  &:focus {outline:0;}
  &:hover {background: white;}
`


class Counter extends Component {
  incrementCount(e) {
    // I need to update the current state's count, and add 1 to it.
    this.setState({
      count: (this.state.count + 1),
    })
  }

  decrementCount(e) {
    this.setState({
      count: (this.state.count - 1),
    })
  }


  render() {
    const { count } = this.props
    const { decrementCount } = this.props
    const { incrementCount } = this.props
    const { nameof } = this.props

    return (
      <div>
        <CountCell draggable="true">
          <Row style={{alignItems: 'center'}}>
                <Col>
                  <CountButton
                    onClick={incrementCount}>
                    <Icon
                      name="icon" className="fa fa-plus score-icon"
                    />
                  </CountButton>
                </Col>
                <Col >
                  <ScoreName>{nameof}</ScoreName>
                </Col>
                <Col >
                  <Score>{count}</Score>
                </Col>
                <Col>
                  <CountButton
                    onClick={decrementCount}>
                    <Icon
                      name="icon" className="fa fa-minus score-icon"
                    />
                  </CountButton>
                </Col>
              </Row>

        </CountCell>
      </div>


    )
  }
}

Counter.propTypes = {
  // We are going to _require_ a prop called "count". It _has_ to be a Number.
  count: PropTypes.number.isRequired,

  // We are going to _require_ a prop called "incrementCount". It _has_ to be a Function.
  incrementCount: PropTypes.func.isRequired,

  // We are going to _require_ a prop called "decrementCount". It _has_ to be a Function.
  decrementCount: PropTypes.func.isRequired,

  nameof: PropTypes.string.isRequired,
}

export default Counter

我不确定如何获取React-DND或Dragula （或只是一些基本功能）以使其拖入新的ul

Answer 1

您应该可以将目标ul设置为this或this。基本上，将你想要的ul拖入可投放项目的目标并拖放它。