J'ai une vidéo d'une balle déplaçable en ligne. Je dois implémenter cette fonctionnalité dans React js. Le ballon peut être traîné et franchi la ligne Après avoir relâché le club, celui-ci ne reviendra pas à sa position d'origine.

J'ai essayé plusieurs codes et méthodes, mais aucun d'entre eux n'a fonctionné comme prévu. J'ai besoin d'aide pour créer une fonctionnalité comme celle-ci dans React, si quelqu'un sait comment le faire, aidez-moi.

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)} /> ))} 
 ); };

Ce code ne fonctionne pas.