Estoy probando una función en un formulario para reordenar los campos usando arrastrar usando esto, tengo que reordenar la posición de los campos (elemento individual) de arriba a abajo, de abajo a arriba, de izquierda a derecha y de derecha a izquierda .
El problema al que me enfrento es que he dividido los campos en componentes separados, como dropdown.jsx , radio.jsx , y no puedo elevar el estado de niño a padre. Además, ¿hay alguna forma de aplicar la función de arrastre horizontal y verticalmente (cualquier complemento o ...)?
Por supuesto, hay un montón de paquetes de arrastrar y soltar en NPM , pero si desea implementar el suyo, le mostraré un ejemplo que muestra una implementación de muestra de la función de arrastrar y soltar con JavaScript puro.
function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); } body { margin: 0; display: flex; background: #1e1e2d; } #ddzone1, #ddzone2, #ddzone3, #ddzone4 { width: 35px; height: 35px; margin: 10px; padding: 10px; border-radius: 6px; border: 1px dashed #eee; } <!DOCTYPE HTML> <html> <head> </head> <body> <div> <div id="ddzone1" ondrop="drop(event)" ondragover="allowDrop(event)"> <div draggable="true" ondragstart="drag(event)" id="element"> <svg aria-hidden="true" width="32" height="37" viewBox="0 0 32 37"> <path d="M31 7H1V6c0-2.61 2.42-5 5-5h20c2.58 0 5 2.39 5 5v1Z" fill="#8FD8F7"></path> <path d="M1 25v1c0 2.61 2.42 5 5 5h13v6l6-6h1c2.58 0 5-2.39 5-5v-1H1Z" fill="#155397"></path> <path d="M1 17v6h30v-6H1Z" fill="#2D6DB5"></path> <path d="M1 9v6h30V9H1Z" fill="#46A2D9"></path> </svg> </div> </div> <div id="ddzone2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div> <div> <div id="ddzone3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="ddzone4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div> </body> </html>El ejemplo nos permite arrastrar el elemento ya sea vertical u horizontalmente y soltar uno de ddzones . Si desea restringir a los usuarios para que muevan los elementos solo en una dirección, recomiendo usar el paquete multifuncional react-sortable-hoc que permite mover elementos solo verticalmente u horizontalmente. Además, está muy bien documentado y es fácil de usar.
Su pregunta tiene un gran alcance. En resumen, hay 2 soluciones,
En uno de mis proyectos, estaba usando esta biblioteca y es realmente buena. https://www.npmjs.com/package/react-draggable
No estoy seguro acerca de su base de código. Pero creo que NO estás usando el contexto React para actualizar el estado. El contexto podrá actualizar el estado correctamente.
Gracias
const handleHorizontalDrag = (event) => { event.target.style.left = event.x + "px"; }; const handleVerticalDrag = (event) => { event.target.style.top = event.y + "px"; }; document.addEventListener("dragover", function (e) { e.preventDefault(); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=1, initial-scale=1.0" /> <title>Document</title> </head> <body> <button style="position: absolute; top: 20px; left: 0px" id="draggable-button-1" draggable="true" ondragend="handleHorizontalDrag(event)" > Horizontal </button> <button style="position: absolute; top: 60px; left: 0px" id="draggable-button-2" draggable="true" ondragend="handleVerticalDrag(event)" > Verical </button> </body> <script src="index.js"></script> </html>