Con la esperanza de obtener ayuda sobre la operación de arrastrar y copiar de un div editable al siguiente. Similar a cómo puede arrastrar y copiar en una hoja de cálculo. El usuario debería poder ingresar algunos datos en los divs y arrastrarlos y copiarlos a otros elementos div.
Obtuve mucha ayuda con este código de Nippey en este enlace (pero no es exactamente lo que necesito). HTML5 arrastrar y copiar?
Agradecería cualquier ayuda :).
<!DOCTYPE html> <html> <head> <style> #div1, #div2, #div3 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; cursor: pointer; } </style> <script> function allowDrop(ev) { /* The default handling is to not allow dropping elements. */ /* Here we allow it by preventing the default behaviour. */ ev.preventDefault(); } function drag(ev) { /* Here is specified what should be dragged. */ /* This data will be dropped at the place where the mouse button is released */ /* Here, we want to drag the element itself, so we set it's ID. */ ev.dataTransfer.setData('text/html', ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData('text/html'); /* If you use DOM manipulation functions, their default behaviour it not to copy but to alter and move elements. By appending a ".cloneNode(true)", you will not move the original element, but create a copy. */ var nodeCopy = document.getElementById(data).cloneNode(true); nodeCopy.id = 'newId'; /* We cannot use the same ID */ ev.target.appendChild(nodeCopy); } </script> </head> <body> <h2>Drag and Copy</h2> <p>Drag and Copy Entered Data from one cell to the next.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true"></div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true"></div> </body> </html>