Przeciągnij link, aby utworzyć pole tekstowe dynamicznie przy użyciu jQuery

Question

Chłopaki mam plik HTML, który składa się z 2 znacznikami DIV i przycisk Prześlij, Wygląda następująco

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

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

co chcę, jeśli przeciągam link (Textbox) z menu DIV do DIV kontenera Potrzebuję Textbox do dynamicznego tworzenia DIV w kontenerze ... i później muszę pobrać wartości pola tekstowego z przycisku Prześlij, czy jest jakiś pomysł lub źródło, jak osiągnąć to przy pomocy Jquery?

Answer 1

To jest to, czego potrzebujesz:

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

Answer 2

Powiedziałbym coś takiego. Nie testowałem jednak kodu.

Najpierw utwórz łącze do przeciągnięcia/upuszczenia za pomocą jquery ui. Dodaj klasy przeciągalne & droppable do linku. Funkcja wyzwalacza upuszczania służy do tworzenia pola tekstowego wewnątrz kontenera.

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

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

zależności od tego jak i gdzie chcesz wartości z pola tekstowego można użyć tej metody, która będzie przechowywać wartości pola tekstowego w tablicy.

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

HTML musiałaby zmienić

<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

coś takiego? http://jsbin.com/uhuvox/edit#source

Zauważ, że zmieniła swój html dodając „data-name” atrybut na link, który określa nazwę wejścia tworzy