Créer des lignes de sphère déplaçables dans React JS
P粉448130258
P粉448130258 2023-09-07 12:26:10
0
1
436

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.

P粉448130258
P粉448130258

répondre à tous (1)
P粉464113078
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)} /> ))}
); };
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!