Перетащите ссылку, чтобы динамически создать текстовое поле с помощью Jquery.

Question

Ребята, у меня есть HTML-файл, который состоит из 2 тегов DIV и кнопки «Отправить», выглядит следующим образом

<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

как то так?http://jsbin.com/uhuvox/edit#source

обратите внимание, что я изменил ваш html, добавив к ссылке атрибут «data-name», который задает имя ввода, которое он создает

Answer 3

Я бы сказал что-то вроде этого.Хотя я не тестировал код.

Сначала сделайте ссылку перетаскиваемой с помощью jquery ui.Добавьте классы, которые можно перетаскивать на ссылку.При удалении вызывает функцию для создания текстового поля внутри контейнера.

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

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

В зависимости от того, как и где вы хотите получить значения из текстового поля, вы можете использовать этот метод, который будет хранить значения текстового поля в массиве.1006 *

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()">