84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
ドラッグ可能なボールのビデオがオンラインにあります。この機能をreact jsで実装する必要があります。ボールをドラッグしてラインを越えることができます クラブを放すとクラブは元の位置には戻りません。
複数のコードとメソッドを試しましたが、どれも期待通りに機能しませんでした。 React でこのような機能を作成するのに助けが必要です。誰かがその方法を知っていれば助けてください。
このコードは機能しません。
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)} /> ))} ); };
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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)} /> ))} ); };