[ListBox] リスト内の項目をドラッグ＆ドロップで並べ替えることができない – MESCIUS ナレッジベース

作成日: 2023/03/01 最終更新日: 2023/12/08

文書種別

不具合

発生環境

Reactの製品デモで発生

状況

回避方法あり

詳細

下記のデモにて「ドラッグ＆ドロップで列を移動可能にする」をチェックしても、列ピッカー内で列移動ができません。
本現象は、デモの実装方法の問題です。
グリッド：列ピッカー (React)

回避方法

「app.jsx」ファイルに記載のコードを以下のように修正することで、正常に動作します。

(1)41行目のコードを次のように変更します。

<div className="column-picker-div">

(2)93行目のinitializedイベント内に、Pickerの各イベント処理を追加します。

initializedPicker(picker) {
    //Pickerのイベント処理を追加
    const host = picker.hostElement;
    host.addEventListener('dragstart', this.handleDragStart.bind(this));
    host.addEventListener('dragover', this.handleDragOver.bind(this));
    host.addEventListener('drop', this.handleDrop.bind(this));
    host.addEventListener('dragend', this.handleDragEnd.bind(this));