Реализация перетаскивания с несколькими целями перетаскивания с использованием ReactJS

Question

Пожалуйста, будьте любезны, помогите мне перетаскивать код с помощью нескольких целей.Я очень новичок в использовании «реакции», у меня мозги разбираются: (

Ниже приведен мой грязный код. Я создал файлы компонентов и импортировал их в основной файл app.js. Я думаю, что это труднореализовать перетаскивание из-за способа их настройки? Очень ценится.

РЕДАКТИРОВАТЬ По сути, я хочу перетащить элемент из очереди в Выполняется, Готово и т. д. Примерно такбыло бы идеально https://codesandbox.io/s/26z4vlzqj РЕДАКТИРОВАТЬ

Это файл App.js

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Top from './components/top.jsx';
import Queue from './components/queue.jsx';
import InProgress from './components/inProgress.jsx';
import Done from './components/done.jsx';

/* Syles */
const catWrapperDivStyle = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr 1fr'
};

const catDivStyle = {
  display: 'grid',
  borderRight: '1px solid gray',
  borderLeft: 'none',
  borderBottom: 'none'
};
/* End Syles */

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <header>
        <Top />
        </header>
        <div style={catWrapperDivStyle}>
          <div style={catDivStyle}>
            <Queue items={this.props.items} />
          </div>
          <div style={catDivStyle}>
            <InProgress items={this.props.items} />
          </div>
          <div style={catDivStyle}>
            <Done items={this.props.items} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Это файл Top.jsx

import React, { Component } from 'react';

/* Syles */
const divTobBarStyle = {
  display: 'grid',
  gridTemplateColumns: '10% 80% 10%'
};

const divLogoStyle = {
  display: 'grid',
  backgroundColor: '#343d51'
};

const divNewTaskStyle = {
  background: '#343d51',
  paddingRight: '10px',
};

const pLogoStyle = {
  fontFamily: 'Geneva',
  fontSize: '18px',
  textAlign: 'center',
  padding: '10px',
  border: '1px',
  color: 'white'
};


const pNewTaskStyle = {
  fontFamily: 'Geneva',
  fontSize: '18px',
  textAlign: 'center',
  padding: '10px',
  border: '1px solid white',
  color: 'white'
};

/* End Syles */


class Top extends Component {
  render() {
    const TopBar = () => (
      <div style={divTobBarStyle}>
          <div style={divLogoStyle}>
            <Logo />
          </div>
          <div name="centerspace" style={{backgroundColor: '#343d51'}}>
          </div>  
          <div style={divNewTaskStyle}>
            <NewTask />
          </div>
      </div>  
    );

    const Logo = () => (
      <div style={divLogoStyle}>
        <p style={pLogoStyle}>KANBAN</p>
      </div>
    );

    const NewTask = () => (
      <div style={divNewTaskStyle}>
        <p style={pNewTaskStyle}>+ New Task</p>
      </div>
    );


    return (
      <div>
        <header>
        <TopBar />
        </header>
      </div>
    );
  }
}

export default Top;

Это файл queue.jsx, inProgress.jsx и done.jsx

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import axios from 'axios';


/* Syles */

const pCatStyle = {
  fontFamily: 'Geneva',
  fontSize: '16px',
  textAlign: 'center',
  color: 'gray'
};

const qeueuCardStyles = {
  display: 'grid',
  marginBottom: '25px',
  padding: '10px',
  backgroundColor: '#ffbc3f',
  border: '2px solid black',
  borderRadius: '10px',
  boxShadow: '5px 10px 5px #888888'
};

const collapsible = {
  backgroundColor: '#777',
  color: 'white',
  cursor: 'pointer',
  padding: '18px',
  width: '100%',
  border: 'none',
  textAlign: 'left',
  outline: 'none',
  fontSize: '15px'
}

const activeHover = {
  backgroundColor: '#555',
}

const content = {
  padding: '0 18px',
  display: 'none',
  overflow: 'hidden',
  backgroundColor: '#f1f1f1'
};

/* End Syles */


class Queue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carditems: [],
      hasItems: true
    }
  }

addItemToInventory = (item) => {
  // addItemToFakeXHR(item)
  //   .then( items => {
  //     if (items) {
  //       this.setState({ items })
  //     }
  //   })

}

componentDidMount() {
  // getItemsFromFakeXHR()
  //   .then( items => {
  //     this.setState({ items })
  //   }, function() {
  //     console.log('this.state updated', this.state)
  //   })
console.log('THIS IS WORKING')
  axios
  .get('/carditems')
  .then( carditems => {
    console.log("items", carditems)
    this.setState({carditems: carditems.data})
  })
  .catch( err => {
    console.log('err', err)
  })
}

renderItemList() {
  if (this.state.hasItems) {
    return <ItemList carditems={this.state.carditems}/>
  } else {
    return <div><p> Error </p></div>
  }
}

render() {    
const Section = () => (
  <div>
  <p style={pCatStyle}>IN QUEUE</p>
    <div style={{padding: '40px'}}>
        <div>
          <ItemList path="/carditems" carditems={this.state.carditems}/><br />
          <Router>
            <div>
                <Link className="App-title" to="/items">Items</Link>
              <Route path="/items" component={ () => <ItemList items={this.state.items}/>}/>
            </div>
          </Router>
          <ItemForm />
        </div>
    </div>
  </div>
);

return (
    <div>
      <Section />
    </div>
    );
  }
}

function ItemList(props) {

  return props.carditems.map( carditem => 
    <Item 
      key={carditem.card_id} 
      title={carditem.title} 
      body={carditem.body}
      priority_id={carditem.priority_id}
      status_id={carditem.status_id}
      created_by={carditem.created_by}
      assigned_to={carditem.assigned_to}
      />)
}

function Item(props) {
  console.log('props', props)

/* Helpers */  
function thePriority() {
  let priorityVar = props.priority_id;

  if (priorityVar === 111) {
    return "Low"
  } else if (priorityVar === 555) {
      return "Medium"
    } else if (priorityVar === 999) {
        return "High"
      }
}

function theStatus() {
  let statusVar = props.status_id;

  if (statusVar === 10) {
    return "Queue"
  } else if (statusVar === 50) {
      return "In Progress"
    } else if (statusVar === 90) {
        return "Done"
      }
}

// function userCreatedAssigned() {
//   let userVar = props.created_by || props.assigned_to;

//   if (userVar === props.user_id) {
//     return props.first_name && ' ' && props.last_name
//   } 
// }


/* End Helpers */


/* Do not display if status is not 'Queue' */
if (props.status_id !== 10) {
    return null
  } else {
  return  <div style={qeueuCardStyles}>
            <button style={collapsible}><h3 align="center">{props.title} </h3></button>
            <div style={content}><p>Description:<br />{props.body}</p>
            Priority: {thePriority()} <br />
            Status: {theStatus()} <br />
            Created by: {props.created_by} <br />
            Assigned to: {props.assigned_to} <br />
            </div>
          </div>
          }
  }

class ItemForm extends Component {
  constructor(props) {
    super(props)
    this.state ={
      description: null,
      priority: null,
      by: null,
      to: null
    }
  }

  handleSubmit = (e) => {
    e.preventDefault()
    console.log('SUBMITTED!!!!', this.state)
    this.props.addItem(this.state)
  }

  handleChange = (e) => {
    e.preventDefault()

    const { description, value } = e.target
    this.setState({
      [description] : value
    })
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <label> Description:
          <input onChange={this.handleChange} type="text" name="description"/>
        </label> <br />
        <label> Priority:
          <select onChange={this.handleChange} name="priority">
            <option value="Low">Low</option>
            <option value="Medium">Medium</option>
            <option value="High">High</option>
          </select>
        </label> <br />
        <label> By:
          <input onChange={this.handleChange} type="text" name="by"/>
        </label> <br />
        <label> To:
          <input onChange={this.handleChange} type="text" name="to"/>
        </label> <br />

        <input type="submit"/>
      </form>
    )
  }

}

export default Queue;