Maison > Questions et réponses > le corps du texte
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粉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> ); };