jQuery Перетащите данные из тега <div>в тег <textarea>

Question

Я занимался исследованием, но у меня нет способа решить эту проблему:

Я хотел бы перетащить данные из тега <div> в тег <textarea> со значением в <textarea> будет изменен следующий за положением, где я отбрасываю тег <div>.

Пример: value1 -> Я перетаскиваю <div class="btn btn-info draggable">value1</div> на <textarea>Type something</textarea> -> меняю на <textarea> Type value1 something</textarea>

Это это мой текущий код:

$(document).ready(function () {
    $(".draggable").draggable({
        revert: true,
        helper: 'clone',
        start: function (event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function (event, ui) {
            $(this).fadeTo(0, 1);
        }
    });

    $("#MessageArea").droppable({
        hoverClass: 'active',
        drop: function (event, ui) {
            this.value += " *" + $(ui.draggable).text() + "* ";
        },
    });
});

<fieldset>
    <legend>Data Area</legend>
    <div class="btn btn-info draggable">value1</div>
    <div class="btn btn-info draggable">value2</div>
</fieldset>

<br />

<div class="form-group">
    <textarea id="MessageArea">Type something</textarea>
    <br />
    <input type="button" class="btn btn-warning" value="CLEAR" onclick="$('#MessageArea').val('');" />
</div>

Answer 1

Я хотел бы опубликовать здесь свое исследование, потому что я не знаю, как использовать код в библиотеке.

Это будет примерно так. Но данные, которые после перетаскивания получают URL, не получают текст тега.

Не могли бы вы просмотреть их и дать мне свой комментарий?

<fieldset>
    <legend>Data Area</legend>
    <a href="#" class="btn btn-info" draggable="true">Text 1</a>
    <a href="#" class="btn btn-info" draggable="true">Text 2</a>
    <a href="#" class="btn btn-info" draggable="true">Text 3</a>
</fieldset>

<br />
<br />

<textarea id="MessageArea" class="form-control" rows="15" style="min-width: 100%">I have a pen</textarea>

Answer 2

Добро пожаловать в переполнение стека!

Ваш код работает нормально, когда я пытаюсь. Обратите внимание на эту ручку: https://codepen.io/MortenDL/pen/yLOBZKP

Однако это не изменит значения html так, как вы хотите. Если вы хотите получить значение из текстового поля впоследствии, вы можете сделать это:

$("#MessageArea").val()