Ich habe ein Video von einem ziehbaren Ball online. Ich muss diese Funktionalität in React Js implementieren. Der Ball kann über die Linie gezogen und überquert werden Nachdem Sie den Schläger losgelassen haben, kehrt der Schläger nicht in seine ursprüngliche Position zurück.

Ich habe mehrere Codes und Methoden ausprobiert, aber keiner davon hat wie nötig funktioniert. Ich brauche Hilfe beim Erstellen einer solchen Funktionalität in React. Wenn jemand weiß, wie das geht, helfen Sie mir bitte.

const Ball = ({ color, onDragStart, onDragOver, onDrop }) => ( 
 ); import React, { useState } from 'react'; import Ball from './Ball'; const colors = ['red', 'blue', 'green', 'yellow']; const Line = () => { const [balls, setBalls] = useState(colors); const onDragStart = (e, index) => { e.dataTransfer.setData('index', index); }; const onDragOver = (e) => { e.preventDefault(); }; const onDrop = (e, index) => { const droppedIndex = e.dataTransfer.getData('index'); const newBalls = [...balls]; newBalls.splice(droppedIndex, 1); newBalls.splice(index, 0, colors[droppedIndex]); setBalls(newBalls); }; return ( 
 {balls.map((color, index) => (  onDragStart(e, index)} onDragOver={onDragOver} onDrop={(e) => onDrop(e, index)} /> ))} 
 ); };

Dieser Code funktioniert nicht.