Erstellen Sie ziehbare Kugellinien in React JS

Question

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 }) => (
       <div
         className="ball"
         draggable
         onDragStart={onDragStart}
         onDragOver={onDragOver}
         onDrop={onDrop}
         style={{ backgroundColor: color }}
      />
     );


     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 (
    <div className="line">
      {balls.map((color, index) => (
        <Ball
          key={index}
          color={color}
          onDragStart={(e) => onDragStart(e, index)}
          onDragOver={onDragOver}
          onDrop={(e) => onDrop(e, index)}
        />
      ))}
    </div>
  );
};

Dieser Code funktioniert nicht.

Answer 1

const Ball = ({ color, onDragStart, onDragOver, onDrop }) => (
       <div
         className="ball"
         draggable
         onDragStart={onDragStart}
         onDragOver={onDragOver}
         onDrop={onDrop}
         style={{ backgroundColor: color }}
      />
     );


     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 (
    <div className="line">
      {balls.map((color, index) => (
        <Ball
          key={index}
          color={color}
          onDragStart={(e) => onDragStart(e, index)}
          onDragOver={onDragOver}
          onDrop={(e) => onDrop(e, index)}
        />
      ))}
    </div>
  );
};