Drag link Dynamically create text field using jQuery

Guys I have an HTML file, which consists of two DIV tags and a submit button, as follows

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

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

What I want, if I dragged the link (text box) from the DIV menu to the Container DIV, I need the text file to be created in the DIV container dynamically .. and later I need to get the Textbox values ​​from the Submit button, is there any idea or source on how to achieve this with jQuery?

+5
source share
3 answers

This is what you need:

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

+2
source

- . .

draggable/droppable, jquery ui. , . .

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

All Articles