拖动链接以使用 Jquery 动态创建文本框答案

【问题标题】：Drag a link to Create a Textbox Dynamically using Jquery拖动链接以使用 Jquery 动态创建文本框
【发布时间】：2011-10-28 07:43:55
【问题描述】：

伙计们，我有一个由 2 个 DIV 标签和一个提交按钮组成的 HTML 文件，如下所示

<div id="menu">
    <a href="#">Textbox</a>
</div>

<div id="Container">
  <!-- this is Dynamic area -->     
</div>
<input type="Submit" name="submit">

我想要的是，如果我将链接（文本框）从菜单 DIV 拖到容器 DIV，我需要在容器 DIV 中动态创建一个文本框。然后我需要从提交按钮获取文本框值，有没有关于如何使用 Jquery 实现这一点的想法或来源？

【问题讨论】：

标签： jquery html dynamic textbox drag-and-drop

【解决方案1】：

这是你需要的：

http://jsfiddle.net/zSUJF/18/

【讨论】：

谢谢老兄！我几乎得到了我想要的;)

【解决方案2】：

我会说这样的话。不过我没有测试代码。

首先使用 jquery ui 使链接可拖放。将可拖放的类添加到链接中。在放置时触发一个函数以在容器内创建一个文本框。

$(".draggable").draggable();

$(".droppable").droppable({
drop: function() { 
    $('#Container').append($('<input type="text" id="someid" />'));
    }
});

根据您希望从文本框中获取值的方式和位置，您可以使用此方法将文本框值存储在数组中。

function getvalues(){
    var values = {};
    $("#Container :input").each(function (i, item) {
    if (item.id != "") {
        values[item.id] = item.value;
        }
    });
}

您的 html 必须更改为

<div id="menu">
    <a class="draggable" href="#">Textbox</a>
</div>

<div id="Container" class="droppable">
  <!-- this is Dynamic area -->     
</div>
<input type="Submit" name="submit" onclick="getvalues()">

【讨论】：

【解决方案3】：

像这样？ http://jsbin.com/uhuvox/edit#source

请注意，我通过向链接添加“data-name”属性来更改您的 html，该属性指定它创建的输入名称

【讨论】：