¿Qué necesito cambiar en mi código para que genere campos arrastrables? Esto es lo que he probado hasta ahora:
(function() { var counter = 0; var b = document.getElementById('b'); var l = document.getElementById('l'); var addInput = function() { counter++; var input = document.createElement("input"); input.id = 'input-' + counter; input.className = 'd'; l.appendChild(input); }; b.addEventListener('click', function() { addInput(); }.bind(this)); })(); $('.d').draggable({ cancel: null }); $('.d input').click(function() { $(this).focus(); }); <script src="https://code.jquery.com/jquery-1.7.2.js"></script> <script src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script> <button id="b" type="button">Add</button> <br> <label id="l" action=""> </label>El código genera actualmente los campos, pero no se pueden arrastrar mientras se hace clic.
Está intentando configurar 'arrastrable' en los elementos antes de que existan.
Intente configurarlo (y su controlador de clics) después de insertarlos en el DOM:
(function() { var counter = 0; var b = document.getElementById('b'); var l = document.getElementById('l'); var addInput = function() { counter++; var input = document.createElement("input"); input.id = 'input-' + counter; input.className = 'd'; l.appendChild(input); $(input).draggable({ cancel: null }) $(input).click(function() { $(this).focus(); }); }; b.addEventListener('click', function() { addInput(); }.bind(this)); })(); <script src="https://code.jquery.com/jquery-1.7.2.js"></script> <script src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script> <button id="b" type="button">Add</button> <br> <label id="l" action=""> </label>