鼠标单击当前鼠标位置或拖放时插入文本字段或复选框 - Insert a textfield or checkbox on mouse click at current mouse position or drag and drop it

Insert a textfield or checkbox on mouse click at current mouse position or drag and drop it

我试图在页面上的任何位置动态插入复选框或文本字段，或者更好的是将文本字段和复选框拖放到页面的任何位置。

目标是向类似的页面添加可编辑的文本字段和复选框

如果有人能帮我就太好了。

很抱歉回复晚了，实际上是在测试；）尝试以下操作（根据需要修改逻辑）：

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

您可以使用Draggle Jquery插件。文档和演示

你只需要添加jquery文件和这个简单的代码：

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

html（您可以使用其他html元素）：

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

更多演示

快速思考：

创建可重复使用的输入字段（模板）

var $textinput = '<input type="text" value="" style="position:absolute" />';

将点击处理程序添加到页面

// 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}');
});

然后在保存时将所有值发送回服务器