Tengo una lista de tareas pendientes y quiero que se pueda arrastrar para poder mover los elementos de la lista y volver a colocarlos si los suelto. Quiero hacer esto sin ningún paquete ni biblioteca, solo quiero hacerlo con javascript , HTML y CSS . Tengo un componente Todolist y un componente Listitem.

esta es la parte de mi componente Todolist que muestra el método de renderizado:

 render() { const List = this.state.todolist.map((item) => { return ( <Listitem key={item.key} handleDrag={this.handleDragItem} > }) } <div id="todoList" onDragOver={this.handleAllowDrop} onDrop={this.handleDropItem} > {List} </div>

y aquí están mis funciones de arrastre:

 handleDragItem = (event) => { event.dataTransfer.setData("text", event.target.id); }; handleAllowDrop = (event) => { event.preventDefault(); }; handleDropItem = (event) => { event.preventDefault(); const data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); };

y aquí está mi componente Listitem:

 class ListItem extends Component { render() { let isDraggable; } return ( <div draggable={isDraggable} onDragStart={this.props.handleDrag} className="listItemContainer" > <img onMouseDown={() => isDraggable= true} onMouseUp={() => isDraggable= false} className="dragIcon" src={draggingIcon} alt="drag-icon" /> <span> {this.props.content} </span> </div> ); } }

Tengo dos problemas, el primero es que no puedo reordenar y reorganizar la lista cuando una fila se arrastra y suelta en otra parte de la lista. La segunda es que no puedo arrastrar mi fila con una parte específica de la fila como la etiqueta img

De hecho, quiero permitir que los elementos de la lista se arrastren solo con el ícono de arrastrar.