Kéo một liên kết để tạo một Textbox động sử dụng jQuery

Question

Guys Tôi đã tập tin HTML mà Gồm 2 thẻ DIV và Submit Button, Hình như như sau

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

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

gì tôi muốn là, nếu tôi kéo một liên kết (Textbox) từ menu DIV để Container DIV tôi cần một Textbox được tạo trong container DIV động .. và sau đó tôi cần phải nhận giá trị Textbox từ nút Submit, Có ý tưởng hay nguồn nào về cách đạt được điều này bằng Jquery không?

Answer 1

Đây là những gì bạn cần:

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

Answer 2

Tôi sẽ nói điều gì đó như thế này. Tôi đã không kiểm tra mã mặc dù.

Đầu tiên tạo liên kết có thể kéo/có thể phân tách bằng jquery ui. Thêm các lớp có thể kéo được & có thể phân tách vào liên kết. Khi trình kích hoạt thả, một chức năng để tạo một hộp văn bản bên trong vùng chứa.

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

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

Tùy thuộc vào cách thức và nơi bạn muốn giá trị từ hộp văn bản bạn có thể sử dụng phương pháp này sẽ lưu trữ giá trị hộp văn bản trong một mảng.

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

html của bạn sẽ phải thay đổi để

<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

một cái gì đó như thế này? http://jsbin.com/uhuvox/edit#source

thông báo rằng tôi đã thay đổi html của bạn bằng cách thêm một "data-name" thuộc tính đến liên kết trong đó nêu rõ tên của đầu vào nó tạo ra