Arrastre un enlace para crear un cuadro de texto dinámicamente usando jQuery

Question

chicos que he archivo HTML que consta de 2 etiquetas DIV y un botón de envío, se ve como la siguiente manera

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

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

Lo que quiero es, si arrastro una link (Textbox) del menú DIV al Container DIV necesito un Textbox para ser Creado en contenedor DIV dinámicamente ... y más tarde necesito obtener los valores de Textbox del botón Submit, ¿Hay alguna idea o fuente sobre cómo lograr esto usando Jquery?

Answer 1

Esto es lo que necesita:

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

Answer 2

Diría algo como esto. Aunque no probé el código.

Primero haga que el enlace se pueda arrastrar/soltar usando jquery ui. Agregue las clases arrastrables & droppable al enlace. Al soltar una función para crear un cuadro de texto dentro del contenedor.

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

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

Dependiendo de cómo y dónde desea que los valores del cuadro de texto que puede utilizar este método que almacenará los valores de cuadro de texto en una matriz.

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

su HTML tendría que cambiar a

<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

algo como esto? http://jsbin.com/uhuvox/edit#source

aviso de que he cambiado su html mediante la adición de un "nombre-datos" atributo para el enlace que especifica el nombre de la entrada que crea