Как поменять элементы местами в двух разных массивах

Question

Я в значительной степени новичок, не усердствуйте со мной (Thx), Я использую реагирующий-красивый-днд. У меня есть две колонки с разными данными. Я нашел функциональность для удаления элемента из столбца X и в столбец Y. То, чего я пытаюсь достичь, это поменять местами предметы. Допустим, я щелкнул «элемент 1» в столбце X и переместил его в «элемент 10» столбца Y, а когда я его уронил, я хочу добавить «элемент 10» в столбец X и «элемент 1» в столбец Y.

Если бы кто-нибудь помог мне с примером кода, это было бы замечательно

Вот код, который у меня есть.

import React, {Component} from 'react';
import {DragDropContext, Droppable, Draggable} from 'react-beautiful-dnd';

const getItems = (count, offset = 0) =>
Array.from({length: count}, (v, k) => k).map(k => ({
  id: `item-${k + offset}`,
  content: `item ${k + offset}`,
}));

const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

const move = (source, destination, droppableSource, droppableDestination) => {
  const sourceClone = Array.from(source);
  const destClone = Array.from(destination);
const [removed] = sourceClone.splice(droppableSource.index, 1);
  destClone.splice(droppableDestination.index, 0, removed);
  const result = {};
  result[droppableSource.droppableId] = sourceClone;
  result[droppableDestination.droppableId] = destClone;
  return result;
};

const grid = 8;

const getItemStyle = (isDragging, draggableStyle) => ({
  userSelect: 'none',
  padding: grid * 2,
  margin: `0 0 ${grid}px 0`,

  background: isDragging ? 'lightgreen' : 'grey',

  // ...draggableStyle,
});

const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? 'lightblue' : 'lightgrey',
  padding: grid,
  width: 250,
});

export default class App extends Component {
  state = {
    items: getItems(2),
    selected: getItems(2, 10),
  };


  id2List = {
    droppable: 'items',
    droppable2: 'selected',
  };

  getList = id => this.state[this.id2List[id]];

  onDragEnd = result => {
    const {source, destination} = result;
    if (!destination)
      {
      return;
      }

    if (source.droppableId === destination.droppableId)
      {
      const items = reorder(
      this.getList(source.droppableId),
      source.index,
      destination.index,
      );

      let state = {items};

      if (source.droppableId === 'droppable2')
        {
        state = {selected: items};
        }

      this.setState(state);
      } else
      {
      const result = move(
      this.getList(source.droppableId),
      this.getList(destination.droppableId),
      source,
      destination,
      );

      this.setState({
        items: result.droppable,
        selected: result.droppable2,
      });
      }
  };

  render() {
    return (
    <DragDropContext onDragEnd={this.onDragEnd}>
      <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
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={getItemStyle(
            snapshot.isDragging,
            provided.draggableProps.style,
            )}>
              {item.content}
            </div>
            )}
          </Draggable>
          ))}
          {provided.placeholder}
        </div>
        )}
      </Droppable>
      <Droppable droppableId="droppable2">
        {(provided, snapshot) => (
        <div
        ref={provided.innerRef}
        style={getListStyle(snapshot.isDraggingOver)}>
          {this.state.selected.map((item, index) => (
          <Draggable
          key={item.id}
          draggableId={item.id}
          index={index}>
            {(provided, snapshot) => (
            <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={getItemStyle(
            snapshot.isDragging,
            provided.draggableProps.style,
            )}>
              {item.content}
            </div>
            )}
          </Draggable>
          ))}
          {provided.placeholder}
        </div>
        )}
      </Droppable>
    </DragDropContext>
    );
  }
}