php - 在当前鼠标位置单击鼠标插入文本字段或复选框或拖放它

Question

我试图在页面上任何位置的鼠标单击鼠标时动态插入复选框或文本字段，甚至更好地将文本字段和复选框拖放到页面的任何位置。

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

如果有人可以帮助我，那就太好了。

Answer 1

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

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

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

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

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

还有一些演示

Answer 2

快速思考：

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

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

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

Answer 3

抱歉回复晚了，实际上是在测试；）尝试一些东西（根据您的需要修改逻辑），如下所示：

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