Maison  >  Questions et réponses  >  le corps du texte

Créer des lignes de sphère déplaçables dans React JS

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

Ce code ne fonctionne pas.

P粉448130258P粉448130258429 Il y a quelques jours497

répondre à tous(1)je répondrai

  • P粉464113078

    P粉4641130782023-09-08 11:17:46

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

    répondre
    0
  • Annulerrépondre