React JS でドラッグ可能な球線を作成する

Question

ドラッグ可能なボールのビデオがオンラインにあります。この機能をreact jsで実装する必要があります。ボールをドラッグしてラインを越えることができます クラブを放すとクラブは元の位置には戻りません。

複数のコードとメソッドを試しましたが、どれも期待通りに機能しませんでした。 React でこのような機能を作成するのに助けが必要です。誰かがその方法を知っていれば助けてください。

リーリー

このコードは機能しません。

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