Estoy usando react-beautiful-dnd y copié el código del tutorial para crear una lista arrastrable. Funcionó y se veía así:

ingrese la descripción de la imagen aquí

Y aquí está el código que construyó esto: https://github.com/DDavis1025/react-beautiful-dnd

Sin embargo, ahora estoy tratando de implementar mi propia lista, que es una lista de reproducción que utiliza la entrada para agregar canciones de la computadora del usuario a la lista:

ingrese la descripción de la imagen aquí

Funciona parcialmente, pero no puedo arrastrar el elemento de la lista en su lugar (siempre vuelve al mismo orden). Aquí está el código que cambié:

column-test.jsx

export default class ColumnTest extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.inputRef = React.createRef(); this.state = { files: [], audio: '', }; } handleClick = event ={amp}gt; { // Helper code to read file and return promise const readFile = (file) ={amp}gt; { const fileList = []; const fileReader = new FileReader(); // create the promise and return it return new Promise((resolve, reject) ={amp}gt; { // if file reader has an error, report it fileReader.onerror = (error) ={amp}gt; { reject({ error }) } // if success, resolve the promise fileReader.onload = (e) ={amp}gt; { resolve({ name: file.name, link: e.target.result }) } // start reading the file fileReader.readAsDataURL(file); }) } // create all the file reader promises // create an array from the files list and use map to generate // an array of promises const allReaders = Array.from(event.target.files).map(readFile) // Now handle the array of promises we just created Promise.all(allReaders) .then(fileList ={amp}gt; { console.log(fileList) // set the state that we have all the files this.setState({ files: fileList }); }) .catch(error ={amp}gt; { console.error(error) }); } render() { return ( {amp}lt;div className="downloadMusic"{amp}gt; {amp}lt;div className="input"{amp}gt; {amp}lt;input onChange={this.handleClick} id="upload-file" className="inputName" type="file" multiple ref={this.inputRef} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="audio-player"{amp}gt; {amp}lt;audio controls autoPlay src={this.state.audio} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;Container{amp}gt; {amp}lt;Title{amp}gt;{this.props.column.title}{amp}lt;/Title{amp}gt; {amp}lt;Droppable droppableId={this.props.column.id}{amp}gt; {provided ={amp}gt; ( {amp}lt;TaskList ref={provided.innerRef} {...provided.droppableProps}{amp}gt; {this.state.files.map((file, index) ={amp}gt; ( {amp}lt;TaskTest key={file.link} file={file} index={index} /{amp}gt; ))} {provided.placeholder} {amp}lt;/TaskList{amp}gt; )} {amp}lt;/Droppable{amp}gt; {amp}lt;/Container{amp}gt; {amp}lt;/div{amp}gt; ); } } 

(Aquí es donde agrego mi entrada y fileReader para agregar archivos a mi matriz de archivos e iterar a través de esos archivos usando la función .map () en return () en render {})

task-test.jsx

 export default class TaskTest extends React.Component { render() { return ( {amp}lt;Draggable draggableId={this.props.file.link} index={this.props.index}{amp}gt; {(provided, snapshot) ={amp}gt; ( {amp}lt;Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} isDragging={snapshot.isDragging} {amp}gt; {this.props.file.name} {amp}lt;/Container{amp}gt; )} {amp}lt;/Draggable{amp}gt; ); } } 

react-beautiful-dnd requiere que administres tu propia lista, lo que significa reordenar la matriz después de que un elemento se haya «eliminado». Realice esto, hay algunas cosas que necesita agregar:

Una función para manejar la «caída»

  onDragEnd(result) { // dropped outside the list if (!result.destination) { return; } const files = reorder( this.state.files, result.source.index, result.destination.index ); this.setState({ files }); } 

Vincula onDragEnd en tu constructor

 this.onDragEnd = this.onDragEnd.bind(this); 

Una función para reordenar la matriz

 const reorder = (list, startIndex, endIndex) ={amp}gt; { const result = Array.from(list); const [removed] = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); return result; }; 

Un DragDropContext alrededor de tu droppable

 {amp}lt;DragDropContext onDragEnd={this.onDragEnd}{amp}gt; {amp}lt;Droppable droppableId={this.props.column.id}{amp}gt; ... 

Puede ver un ejemplo aquí: https://codesandbox.io/s/k260nyxq9v