Блог

Эта библиотека очень, очень крутая. У меня следующая проблема:

У меня есть несколько списков, и я хочу иметь возможность перетаскивать для изменения порядка внутри списка, а также между списками. В приведенных ниже списках пользователь может выбрать перемещение партнера внутри списка или из одного списка в другой.

Похоже, что по умолчанию элементы можно перетаскивать только в пределах одного компонента. Как я могу создать набор компонентов, которые могут быть целями для элементов друг друга?

App.js

 import React from 'react';
import './App.css';
import SortablePartner from './SortablePartner';

const priorityPartners = [
  "AwesomeTech",
  "Bazinga Software"
];

const medPartners = [
  "Zippy-Do",
  "SillySoft",
  "Samsonite"
];

const lowPartners = [
  "Acme Engineering",
  "Elbow Tech",
  "Rockets amp; Ricers"
];

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Prioritize Your Partners</h1>
      </header>
      <div className="SortableContainer">
        <SortablePartner priority="High" state={priorityPartners} />
        <SortablePartner priority="Medium" state={medPartners} />
        <SortablePartner priority="Low" state={lowPartners} />
      </div>
    </div>
  );
}

export default App;
  

SortablePartner.js

 import React, {Component} from 'react';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = SortableElement(({value}) => {
  return(
    <li>
      <div className="partner-element">
        <div className="partner-name">{value}</div>
        <div className="partner-type">
          MSP
        </div>
      </div>
    </li>
  )
});

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortablePartner extends Component {
  state={};
  constructor(props) {
    super(props);
    this.state.items = props.state;
    this.priority = props.priority;
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return (
      <div className="partnerList">
        <h2>Priority: {this.priority}</h2>
        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
      </div>
    )
  }
}

export default SortablePartner;