將鏈接拖到創建動態使用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

通知，我加入了「數據名」屬性來指定輸入的名稱它創建