将链接拖到创建动态使用jQuery

Question

一个文本框

家伙，我已经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的？

Answer 1

这是你所需要的：

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

Answer 2

我会这样说。尽管我没有测试代码。

首先使用jquery ui将链接拖放到/ droppable。将可拖放的类拖放到链接。 On drop触发一个函数在容器中创建一个文本框。

$(".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()"> 

Answer 3

这样的事情？ http://jsbin.com/uhuvox/edit#source

通知，我加入了“数据名”属性来指定输入的名称它创建