Inserte un campo de texto o checkbox con el clic del mouse en la posición actual del mouse o arrástrelo y suéltelo

Estoy tratando de insertar una checkbox o un campo de texto de forma dinámica con un clic del mouse en la posición de la mouse en cualquier parte de la página o incluso mejor arrastrando y soltando campos de texto y casillas de verificación en cualquier posición de la página.

El objective es agregar campos de texto editables y casillas de verificación a una página como esta

sería genial si alguien pudiera ayudarme con eso.

Lamento haber respondido tarde, estaba probando en realidad;) Pruebe ALGO (modifique la lógica de acuerdo con sus necesidades) de esta manera:

$('body').click(function(e){ $('body').append($('').css({position:'absolute',left:e.pageX,top:e.pageY}).focus());}) 

Puede usar el complemento Draggle-Jquery. Documentación y demostración

Solo tiene que agregar archivos jquery y este código simple:

  $(function() { $( "#draggable" ).draggable(); }); 

html (puede usar otros elementos html):

 

Drag me around

Algunas más demos

Pensamiento rápido:

Crear un campo de entrada reutilizable (plantilla)

 var $textinput = ''; 

Agregar controlador de clics a la página

 // Using jquery $('body').on('click', function(event) { var posX = event.offsetX; var posY = event.offsetY; var $input = $textinput this.append($input); $input.css('{x: posX, y: posY}'); }); 

A continuación, envíe todos los valores al servidor al guardar