Estoy tratando de hacer que un elemento de formulario se pueda arrastrar y soltar, pero no puedo hacerlo funcionar. ¿Algunas ideas? Estoy tratando de hacer que se pueda colocar en otro elemento.
Aquí está el código para el elemento de formulario:
<div class="text1"> <form> Item Name:<br> <input type="text" name="fname"> </form> </div>El siguiente código se basa en la API de arrastrar y soltar de HTML5. Cuando lo suelte en un cuadro, ejecutará una función que lo dejará allí.
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } #div1 { width: 350px; height: 70px; padding: 10px; /* not required, just shows hitboxes */ border: 2px solid lime; } #div2 { width: 350px; height: 70px; padding: 10px; /* not required, just shows hitboxes */ border: 2px solid magenta; } #drag1 { /* not required, just shows hitboxes */ display: inline-block; border: 2px solid cyan; } <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div class="text1" id="drag1" draggable="true" ondragstart="drag(event)"> <form> Item Name:<br> <input type="text" name="fname"> </form> </div> <br> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>Agregué identificaciones porque son necesarias para que funcione.
Este código agrega dos cuadros en los que puede arrastrar y soltar un elemento. También se puede soltar entre páginas.
Dado que una entrada de formulario también se clasifica como algo en lo que se pueden colocar cosas, no recomendaría arrastrar y soltar un formulario con una entrada. Obtendrá un error de jerarquía si alguien no hace clic y el DnD se negará a funcionar hasta que vuelva a cargar.