Typescript+React zum Erzielen einfacher Drag-and-Drop-Effekte auf Mobilgeräten und PCs

importiere { Komponente } von „react“;
importiere './Tab.less'
Schnittstelle Requisiten {
 
}
Schnittstelle Benutzer {
    ID: Zeichenfolge,
    Text: Zeichenfolge
}
Schnittstelleninhalt {
    ID: Zeichenfolge,
    Text: Zeichenfolge
}
Schnittstelle Status {
    ButtonIndex: Zahl,
    ButtonArray: Benutzer[],
    ContentArray: Inhalt[]
}
Klasse Tab erweitert Component<Props, State>{
    Konstruktor(Requisiten: Requisiten) {
        super(Requisiten)
        dieser.Zustand = {
            ButtonIndex: 0,
            Schaltflächenarray: [
                {
                    ID: '01',
                    Text: 'Schaltfläche 1'
                },
                {
                    ID: '02',
                    Text: 'Schaltfläche 2'
                },
                {
                    ID: '03',
                    Text: 'Knopf drei'
                }
            ],
            Inhaltsarray: [
                {
                    ID: "c1",
                    Text: 'Inhalt 1'
                },
                {
                    ID: "c2",
                    Text: 'Inhalt 2'
                },
                {
                    ID: "c3",
                    Text: 'Inhalt 3'
                }
            ],
        }
    }
    FnTab(index: zahl):void {
        dies.setState({
            ButtonIndex: Index
        })
    }
    rendern() {
        zurückkehren (
            <div Klassenname='Tabulator'>
                {
                    this.state.ButtonArray.map((Element, Index) => <Schaltflächenschlüssel={Element.id} bei Klick={this.FnTab.bind(this, Index)} Klassenname={this.state.ButtonIndex === Index ? 'Tab-Button ac' : 'Tab-Button'}>{Element.text}</Schaltflächen>)
                }
                {
                    this.state.ContentArray.map((Element, Index) => <div Schlüssel={Element.id} Stil={{display:this.state.ButtonIndex===index?'block':'none'}} Klassenname='tab-content'>{Element.text}</div>)
                }
 
            </div>
        )
    }
}
Registerkarte „Standard exportieren“

.ziehen {
    Position: absolut;
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: rot;
}

importiere { Komponente, createRef } von 'react'
importiere './index.less'
Schnittstelle Requisiten {
 
 
}
Schnittstelle Status {
 
 
}
Klasse TextDrag erweitert Komponente {
  disX: Zahl = 0
  disY: Zahl = 0
  x: Zahl = 0
  y: Zahl = 0
  dragElement = createRef<HTMLDivElement>()
  Konstruktor(Requisiten: Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
 
 
    }
  }
  FnDown(ev: React.MouseEvent) {
    wenn (dieses.dragElement.current) {
      this.disX = ev.clientX - this.dragElement.current?.getBoundingClientRect().left
      this.disX = ev.clientY - this.dragElement.current?.getBoundingClientRect().top
    }
    Dokument.onmousemove = dies.FnMove.bind(dies)
    Dokument.onmouseup = dies.FnUp
  }
  FnMove(ev: Mausereignis) {
    dies.x = ev.clientX - dies.disX
    dies.y = ev.clientY - dies.disY
    wenn (dieses.dragElement.current) {
      dies.dragElement.current.style.left = dies.x + 'px'
      dies.dragElement.current.style.top = dies.y + 'px'
    }
  }
  FnUp() {
    document.onmousemove = null
    document.onmouseup = null
  }
  rendern() {
    zurückkehren (
      <div className="TextDrag" ref={this.dragElement} onMouseDown={this.FnDown.bind(this)}> </div>
 
 
    )
  }
}

Standard-TextDrag exportieren

.TextDrag{
    Position: absolut;
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: rot;
}