react-beautiful-dnd はコンポーネントのドラッグ アンド ドロップ機能を実装します

# 糸
糸を追加 react-beautiful-dnd
 
# ネプチューン
npm をインストール react-beautiful-dnd --save

React をインポートします。{ コンポーネント } から "react" をインポートします。
「react-beautiful-dnd」から { DragDropContext、Droppable、Draggable } をインポートします。
 
// データを初期化 const getItems = count =>
  Array.from({ length: count }, (v, k) => k).map(k => ({
    id: `item-${k + 1}`,
    コンテンツ: `これはコンテンツ ${k + 1} です`
  }));
 
// 配列の順序を再記録する const reorder = (list, startIndex, endIndex) => {
  const 結果 = Array.from(リスト);
 
  const [削除済み] = result.splice(startIndex, 1);
 
  result.splice(endIndex, 0, 削除済み);
  結果を返します。
};
 
定数グリッド = 8;
 
// スタイルを設定する const getItemStyle = (isDragging, draggableStyle) => ({
  // アイテムの見栄えを良くするための基本的なスタイル
  ユーザー選択: "なし",
  パディング: グリッド * 2、
  マージン: `0 0 ${grid}px 0`,
 
  // ドラッグすると背景が変わります background: isDragging ? "lightgreen" : "#ffffff",
 
  // ドラッグ可能なものに適用する必要があるスタイル
  ...ドラッグ可能なスタイル
});
 
定数 getListStyle = () => ({
  背景: '黒'、
  パディング: グリッド、
  幅: 250
});
 
 
 
デフォルトクラスReactBeautifulDndをエクスポートし、Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      アイテム: getItems(11)
    };
    this.onDragEnd = this.onDragEnd.bind(this);
  }
 
  onDragEnd(結果) {
    if (!result.destination) {
      戻る;
    }
 
    const アイテム = 並べ替え(
      this.state.items、
      結果.ソース.インデックス、
      結果.宛先.インデックス
    );
 
    this.setState({
      アイテム
    });
  }
 
 
  与える（） {
    戻る （
      <DragDropContext onDragEnd={this.onDragEnd}>
        <中央>
          <ドロップ可能 droppableId="ドロップ可能">
            {(提供、スナップショット) => (
              <div
              //provided.droppableProps が適用されている同じ要素。
                {...提供されたドロップ可能なプロパティ}
                // ドロップ可能オブジェクトが適切に動作するには、提供された可能な限り最上位の DOM ノードにバインドする必要があります。innerRef。
                ref={provided.innerRef}
                スタイル={getListStyle(スナップショット)}
              >
                {this.state.items.map((item, index) => (
                  <ドラッグ可能なキー={item.id} ドラッグ可能なId={item.id} インデックス={index}>
                    {(提供、スナップショット) => (
                      <div
                        ref={provided.innerRef}
                        {...提供されるドラッグ可能なプロパティ}
                        {...提供されるdragHandleProps}
                        スタイル={getItemStyle(
                          スナップショット.isDragging、
                          提供された.draggableProps.style
                        )}
                      >
                        {アイテムコンテンツ}
                      </div>
                    )}
                  </ドラッグ可能>
                ))}
                {提供されたプレースホルダー}
              </div>
            )}
          </ドロップ可能>
        </center>
      </ドラッグドロップコンテキスト>
    );
  }
}

React をインポートします。{ コンポーネント } から "react" をインポートします。
「react-beautiful-dnd」から { DragDropContext、Droppable、Draggable } をインポートします。
 
 
定数getItems = count => (
  Array.from({ length: count }, (v, k) => k).map(k => ({
    id: `item-${k + 1}`,
    コンテンツ: `これはコンテンツ ${k + 1} です`
  }))
）
 
// 配列の順序を再記録する const reorder = (list, startIndex, endIndex) => {
  const 結果 = Array.from(リスト);
  // 削除された要素を削除して記録します const [removed] = result.splice(startIndex, 1);
  // 元の要素を配列に追加します result.splice(endIndex, 0, removed);
  結果を返します。
};
 
定数グリッド = 8;
 
 
// スタイルを設定する const getItemStyle = (isDragging, draggableStyle) => ({
  // アイテムの見栄えを良くするための基本的なスタイル
  ユーザー選択: "なし",
  パディング: グリッド * 2、
  マージン: `0 ${grid}px 0 0 `,
 
  // ドラッグすると背景が変わります background: isDragging ? "lightgreen" : "#ffffff",
 
  // ドラッグ可能なものに適用する必要があるスタイル
  ...ドラッグ可能なスタイル
});
 
定数 getListStyle = () => ({
  背景: '黒'、
  表示: 'flex'、
  パディング: グリッド、
  オーバーフロー: 'auto'、
});
 
 
クラスReactBeautifulDndHorizo​​ntalはComponentを拡張します{
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      アイテム: getItems(10)
    };
    this.onDragEnd = this.onDragEnd.bind(this);
  }
 
  onDragEnd(結果) {
    if (!result.destination) {
      戻る;
    }
 
    const アイテム = 並べ替え(
      this.state.items、
      結果.ソース.インデックス、
      結果.宛先.インデックス
    );
 
    this.setState({
      アイテム
    });
  }
 
  与える（） {
    戻る （
      <DragDropContext onDragEnd={this.onDragEnd}>
        <ドロップ可能 droppableId="ドロップ可能" direction="水平">
          {(提供、スナップショット) => (
            <div
              {...提供されたドロップ可能なプロパティ}
              ref={provided.innerRef}
              スタイル={getListStyle(snapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                <ドラッグ可能なキー={item.id} ドラッグ可能なID={item.id} インデックス={index}>
                  {(提供、スナップショット) => (
                    <div
                      ref={provided.innerRef}
                      {...提供されるドラッグ可能なプロパティ}
                      {...提供されるdragHandleProps}
                      スタイル={getItemStyle(
                        スナップショット.isDragging、
                        提供された.draggableProps.style
                      )}
                    >
                      {アイテムコンテンツ}
                    </div>
                  )}
                </ドラッグ可能>
              ))}
              {提供されたプレースホルダー}
            </div>
          )}
        </ドロップ可能>
      </ドラッグドロップコンテキスト>
    ）
  }
}
 
デフォルトのReactBeautifulDndHorizo​​ntalをエクスポートする