Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現

「react」からコンポーネントをインポートします。
'./Tab.less' をインポートします
インターフェースProps{
 
}
インターフェースユーザー{
    id: 文字列、
    テキスト: 文字列
}
インターフェースコンテンツ{
    id: 文字列、
    テキスト: 文字列
}
インターフェース状態{
    ボタンインデックス: 数値、
    ボタン配列: user[],
    コンテンツ配列: コンテンツ[]
}
クラスTabはComponent<Props, State>を拡張します{
    コンストラクタ(props: Props) {
        スーパー(小道具)
        この状態 = {
            ボタンインデックス: 0,
            ボタン配列: [
                {
                    id: '01',
                    テキスト: 'ボタン 1'
                },
                {
                    id: '02',
                    テキスト: 'ボタン 2'
                },
                {
                    id: '03',
                    テキスト: 「ボタン3」
                }
            ]、
            コンテンツ配列: [
                {
                    id: 'c1',
                    テキスト: 'コンテンツ 1'
                },
                {
                    id: 'c2',
                    テキスト: 'コンテンツ 2'
                },
                {
                    id: 'c3',
                    テキスト: 'コンテンツ 3'
                }
            ]、
        }
    }
    FnTab(インデックス: 数値):void {
        this.setState({
            ボタンインデックス: インデックス
        })
    }
    与える（） {
        戻る （
            <div className='タブ'>
                {
                    this.state.ButtonArray.map((item, index) => <button key={item.id} onClick={this.FnTab.bind(this, index)} className={this.state.ButtonIndex === index ? 'tab-button ac' : 'tab-button'}>{item.text}</button>)
                }
                {
                    this.state.ContentArray.map((item, index) => <div key={item.id} style={{display:this.state.ButtonIndex===index?'block':'none'}} className='tab-content'>{item.text}</div>)
                }
 
            </div>
        ）
    }
}
デフォルトタブをエクスポート

.ドラッグ{
    位置: 絶対;
    幅: 100ピクセル;
    高さ: 100px;
    背景色: 赤;
}

'react' から { Component, createRef } をインポートします。
'./index.less' をインポートします
インターフェースProps{
 
 
}
インターフェース状態{
 
 
}
クラス TextDrag は Component を拡張します {
  disX: 数値 = 0
  disY: 数値 = 0
  x: 数値 = 0
  y: 数値 = 0
  ドラッグ要素 = createRef<HTMLDivElement>()
  コンストラクタ(props: Props) {
    スーパー(小道具)
    この状態 = {
 
 
    }
  }
  FnDown(ev: React.MouseEvent) {
    if (this.dragElement.current) {
      this.disX = ev.clientX - this.dragElement.current?.getBoundingClientRect().left
      this.disX = ev.clientY - this.dragElement.current?.getBoundingClientRect().top
    }
    document.onmousemove = this.FnMove.bind(これ)
    document.onmouseup = this.FnUp
  }
  FnMove(ev: マウスイベント) {
    this.x = ev.clientX - this.disX
    this.y = ev.clientY - this.disY
    if (this.dragElement.current) {
      this.dragElement.current.style.left = this.x + 'px'
      this.dragElement.current.style.top = this.y + 'px'
    }
  }
  FnUp() {
    ドキュメント.onmousemove = null
    document.onmouseup = null
  }
  与える（） {
    戻る （
      <div className="TextDrag" ref={this.dragElement} onMouseDown={this.FnDown.bind(this)}> </div>
 
 
    ）
  }
}

デフォルトのTextDragをエクスポート

.テキストドラッグ{
    位置: 絶対;
    幅: 100ピクセル;
    高さ: 100px;
    背景色: 赤;
}